Criteo広告とグーグルタグマネージャーでの連携方法
2021.11.24
Criteo広告はご存知でしょうか？Criteo広告はフランスのCriteo社が運営しているリターゲティング型のディスプレイ広告です。Criteo広告は直接HTMLに配信することも可能ですが、グーグルタグマネージャーと連携して設定することも可能です。今回は、Criteoタグの設定仕様と実際のタグマネージャーとの連携方法について解説します。
Criteo広告とは？
CriteoはCriteo社が運営しているリターゲティング型のディスプレイ広告です。
リターゲティング広告とは、一度サイトにユーザーに対して、そのユーザーが見ていた商品やそれに近いおすすめの
商品をバナーとともに表示するものです。
Criteoの特徴として、上記のようにyahooニュースと連携しています(その他にもgooや食べログやfacebookなど多数のメディアと連携しています)。
Yahooは月間ページビュー数が2019年11月現在で約150億PV、月間のアクティブユーザー数も2140万ともいわれています。この巨大なサイトに連携しているため、ここからの流入もかなり期待できますね。
また、ワンクリックで商品の詳細ページに遷移できますし、バナーも事前に登録したいファイルをアップすれば自動的生成されます。
Criteo広告を配信するためには？
Criteo広告を配信するためには、以下の2つが必要です。
商品データのリスト
Criteo広告には、データフィード(サイトに掲載中の商品の、価格、画像、商品説明文をリスト化したもの)を用意する必要があります。基本的には以下のようにCSVデータで用意します。
なお必須の項目は以下となります。
id,title,link,image_link,price
その他の仕様については以下のリンクを参照してください。
商品カタログの仕様
ただ、掲載終了の商品や在庫切れの商品などを無駄に掲載してしまうと、誤った広告を配信することになり、常に情報を最新にする必要があります。
配信するタグの設置
Criteoのタグを配信する方法は以下の2つがあります。
- 直接HTMLに埋め込む
- グーグルタグマネージャーを使って埋め込む
▼関連記事
Criteoタグの種類
Criteoタグの種類は以下の5つです。
- トップページタグ：トップページですが、以下のリストタグ、商品タグ、カートタグ、コンバージョンタグに該当しないページという意味でとらえても問題ないです。
- リストタグ：商品ページ一覧やカテゴリページなど複数の商品が掲載されているページにタグを設置。ただ一覧ページがない場合は、省略可能です。
- 商品タグ：商品ページ。
- カートタグ：「カートに入れる」などカートページにタグを設置
- コンバージョンタグ：購入された商品、価格、購入個数等が記載されているページにタグを設置
このうち商品タグとコンバージョンタグは必須となります。
Criteoタグの仕様
CriteoPartnerID
これはCriteoに配信されているアカウントIDを入力します。
CriteoEmail
メールアドレスを入力します。ただ省略は可能です。
CriteoSiteType
配信するデバイス(PC向けなのか、スマホ向けなのか、その両方なのか)を記載します。
なお以下のスクリプトを記載します。
function(){return /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d";}
CriteoProductID
商品ページ上のIDを設定します（以下が設定例）。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0AdataLayer%20%3D%20dataLayer%20%7C%7C%20%5B%5D%3B%0AdataLayer.push(%7B%0A'PageType'%3A%20'ProductPage'%2C%0A'ProductID'%3A%20'ProductID'%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
CriteoProductIDList
リストページ上の3つの商品の商品IDのリストを設定します。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0AdataLayer%20%3D%20dataLayer%20%7C%7C%20%5B%5D%3B%0AdataLayer.push(%7B%0A'PageType'%3A'ListingPage'%2C%0A'ProductIDList'%20%3A%20%5B'ProductID_1'%2C%20'ProductID_2'%2C%20'ProductID_3'%5D%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
CriteoBasketProducts
カートページ上の商品情報(商品IDや数量、価格など)を設定します。
CriteoTransProducts
購入完了ページ上の商品情報を設定します。
仕様については以下を確認してください。
https://support.criteo.com/s/article?article=204851311-Google-Tag-Manager-Variables&language=ja
Criteoの実際の設定例
今回は、リストページ存在しないHPでしたので、トップページタグ、商品タグ、カートタグ、コンバージョンタグの4つを設定しました。
トップページタグ
トップページタグは以下のように設置しました。こちらは仕様通りで、コピーするときはアカウントを実際のCriteoIDに変えてください。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2F%2Fstatic.criteo.net%2Fjs%2Fld%2Fld.js%22%20async%3D%22true%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Avar%20ua%20%3D%20navigator.userAgent%3B%2F%2F%20jquery%0Avar%20setSiteType%20%3D%20%22d%22%3B%0Aif%20(ua.indexOf('iPhone')%20%3E%200%20%7C%7C%20ua.indexOf('iPod')%20%3E%200%20%7C%7C%20ua.indexOf('Android')%20%3E%200%20%26%26%20ua.indexOf('Mobile')%20%3E%200)%20%7B%0A%2F%2F%20%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E7%94%A8%E3%82%B3%E3%83%BC%E3%83%89%0AsetSiteType%20%3D%20%22m%22%3B%0A%7D%20else%20if%20(ua.indexOf('iPad')%20%3E%200%20%7C%7C%20ua.indexOf('Android')%20%3E%200)%20%7B%0AsetSiteType%20%3D%20%22t%22%3B%0A%7D%0A%0Awindow.criteo_q%20%3D%20window.criteo_q%20%7C%7C%20%5B%5D%3B%0Awindow.criteo_q.push(%0A%7B%20event%3A%20%22setAccount%22%2C%20account%3A%200000%20%7D%2C%0A%7B%20event%3A%20%22setSiteType%22%2C%20type%3A%20setSiteType%20%7D%2C%0A%7B%20event%3A%20%22viewHome%22%20%7D%0A)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
商品タグ
商品タグは以下のように設置しました。今回の設置したページは製品一覧ページと商品ページが合わさったコンテンツでしたので、以下のようになりました。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2F%2Fstatic.criteo.net%2Fjs%2Fld%2Fld.js%22%20async%3D%22true%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20var%20ua%20%3D%20navigator.userAgent%3B%2F%2F%20jquery%0A%09var%20setSiteType%20%3D%20%22d%22%3B%0A%09if%20(ua.indexOf('iPhone')%20%3E%200%20%7C%7C%20ua.indexOf('iPod')%20%3E%200%20%7C%7C%20ua.indexOf('Android')%20%3E%200%20%26%26%20ua.indexOf('Mobile')%20%3E%200)%20%7B%0A%09%09%2F%2F%20%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E7%94%A8%E3%82%B3%E3%83%BC%E3%83%89%0A%09%09setSiteType%20%3D%20%22m%22%3B%0A%09%7D%20else%20if%20(ua.indexOf('iPad')%20%3E%200%20%7C%7C%20ua.indexOf('Android')%20%3E%200)%20%7B%0A%09%09setSiteType%20%3D%20%22t%22%3B%0A%09%7D%0A%20%20%0A%20%20%20%20window.criteo_q%20%3D%20window.criteo_q%20%7C%7C%20%5B%5D%3B%0A%20%20%20%20window.criteo_q.push(%0A%20%20%20%20%7B%20event%3A%20%22setAccount%22%2C%20account%3A%200000%20%7D%2C%0A%20%20%20%20%7B%20event%3A%20%22setSiteType%22%2C%20type%3A%20setSiteType%7D%2C%0A%20%20%20%20%7B%20event%3A%20%22viewItem%22%2C%20item%3A%20%22kokusan%22%7D%0A%20%20%20%20%20%20)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
カートタグ
カートタグは以下に設置しました。カートで必要な情報（価格や数量）は動的に取得できるようにしています。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2F%2Fstatic.criteo.net%2Fjs%2Fld%2Fld.js%22%20async%3D%22true%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20var%20ua%20%3D%20navigator.userAgent%3B%2F%2F%20jquery%0A%09var%20setSiteType%20%3D%20%22d%22%3B%0A%09if%20(ua.indexOf('iPhone')%20%3E%200%20%7C%7C%20ua.indexOf('iPod')%20%3E%200%20%7C%7C%20ua.indexOf('Android')%20%3E%200%20%26%26%20ua.indexOf('Mobile')%20%3E%200)%20%7B%0A%09%09%2F%2F%20%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E7%94%A8%E3%82%B3%E3%83%BC%E3%83%89%0A%09%09setSiteType%20%3D%20%22m%22%3B%0A%09%7D%20else%20if%20(ua.indexOf('iPad')%20%3E%200%20%7C%7C%20ua.indexOf('Android')%20%3E%200)%20%7B%0A%09%09setSiteType%20%3D%20%22t%22%3B%0A%09%7D%0A%20%20%0A%20%20function%20getItem()%20%7B%0A%20%20%20%20var%20pi%20%3D%20document.getElementsByTagName('meta')%3B%0A%20%20%20%20for(i%3D0%3Bi%3Cpi.length%3Bi%2B%2B)%7B%0A%20%20%20%20%20%20if(pi%5Bi%5D.getAttribute(%22property%22)%3D%3D%22etm%3Acart_item%22)%7B%0A%20%20%20%20%20%20%20%20return%20JSON.parse(pi%5Bi%5D.getAttribute(%22content%22))%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20return%20%22%22%3B%0A%20%20%7D%0A%20%20%0A%20%20var%20items%20%3D%20getItem()%3B%0A%20%20var%20citems%20%3D%20%5B%5D%3B%0A%20%20for(i%20%3D%200%3B%20i%20%3C%20items.length%3B%20i%2B%2B)%20%7B%0A%20%20%20%20citems%5Bi%5D%20%3D%20%7B%22id%22%3A%20%7B%7Bcriteo_ids%7D%7D%5Bitems%5Bi%5D.goods%5D%2C%20%22price%22%3A%20items%5Bi%5D.price%2C%20%22quantity%22%3A%20items%5Bi%5D.qty%7D%3B%0A%20%20%7D%0A%20%20%2F%2Fconsole.log(citems)%3B%0A%20%20%20%20%20%20window.criteo_q%20%3D%20window.criteo_q%20%7C%7C%20%5B%5D%3B%0A%20%20%20%20window.criteo_q.push(%0A%20%20%20%20%7B%20event%3A%20%22setAccount%22%2C%20account%3A%200000%20%7D%2C%0A%20%20%20%20%7B%20event%3A%20%22setSiteType%22%2C%20type%3A%20setSiteType%7D%2C%0A%20%20%20%20%7B%20event%3A%20%22viewBasket%22%2C%20item%3Acitems%7D%0A%20%20%20%20)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
コンバージョン
カートタグは以下に設置しました。カートで必要な情報（価格や数量）は動的に取得できるようにしています。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2F%2Fstatic.criteo.net%2Fjs%2Fld%2Fld.js%22%20async%3D%22true%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20var%20ua%20%3D%20navigator.userAgent%3B%2F%2F%20jquery%0A%09var%20setSiteType%20%3D%20%22d%22%3B%0A%09if%20(ua.indexOf('iPhone')%20%3E%200%20%7C%7C%20ua.indexOf('iPod')%20%3E%200%20%7C%7C%20ua.indexOf('Android')%20%3E%200%20%26%26%20ua.indexOf('Mobile')%20%3E%200)%20%7B%0A%09%09%2F%2F%20%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E7%94%A8%E3%82%B3%E3%83%BC%E3%83%89%0A%09%09setSiteType%20%3D%20%22m%22%3B%0A%09%7D%20else%20if%20(ua.indexOf('iPad')%20%3E%200%20%7C%7C%20ua.indexOf('Android')%20%3E%200)%20%7B%0A%09%09setSiteType%20%3D%20%22t%22%3B%0A%09%7D%0A%20%20%0A%20%20function%20getItem()%20%7B%0A%20%20%20%20var%20pi%20%3D%20document.getElementsByTagName('meta')%3B%0A%20%20%20%20for(i%3D0%3Bi%3Cpi.length%3Bi%2B%2B)%7B%0A%20%20%20%20%20%20if(pi%5Bi%5D.getAttribute(%22property%22)%3D%3D%22etm%3Aconversion_detail%22)%7B%0A%20%20%20%20%20%20%20%20return%20JSON.parse(pi%5Bi%5D.getAttribute(%22content%22))%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20return%20%22%22%3B%0A%20%20%7D%0A%20%20var%20items%20%3D%20getItem()%3B%0A%20%20var%20citems%20%3D%20%5B%5D%3B%0A%20%20for(i%20%3D%200%3B%20i%20%3C%20items.length%3B%20i%2B%2B)%20%7B%0A%20%20%20%20%20%2F%2Fcitems%5Bi%5D%20%3D%20%7B%22id%22%3A%20items%5Bi%5D.goods%2C%20%22price%22%3A%20items%5Bi%5D.price%2C%20%22quantity%22%3A%20items%5Bi%5D.qty%7D%3B%0A%20%20%20%20citems%5Bi%5D%20%3D%20%7B%22id%22%3A%20%7B%7Bcriteo_ids%7D%7D%5Bitems%5Bi%5D.goods%5D%2C%20%22price%22%3A%20items%5Bi%5D.price%2C%20%22quantity%22%3A%20items%5Bi%5D.qty%7D%3B%0A%20%20%7D%0A%20%20%2F%2Fconsole.log(citems)%3B%0A%20%20function%20getOrderId()%20%7B%0A%20%20%20%20var%20pi%20%3D%20document.getElementsByTagName('meta')%3B%0A%20%20%20%20for(i%3D0%3Bi%3Cpi.length%3Bi%2B%2B)%7B%0A%20%20%20%20%20%20if(pi%5Bi%5D.getAttribute(%22property%22)%3D%3D%22etm%3Aconversion%22)%7B%0A%20%20%20%20%20%20%20%20return%20JSON.parse(pi%5Bi%5D.getAttribute(%22content%22))%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20return%20%22%22%3B%0A%20%20%7D%0A%20%20var%20order%20%3D%20getOrderId()%3B%0A%0A%20%20window.criteo_q%20%3D%20window.criteo_q%20%7C%7C%20%5B%5D%3B%0A%20%20window.criteo_q.push(%0A%20%20%20%20%7B%20event%3A%20%22setAccount%22%2C%20account%3A%200000%20%7D%2C%0A%20%20%20%20%7B%20event%3A%20%22setSiteType%22%2C%20type%3A%20setSiteType%7D%2C%0A%20%20%20%20%7B%20event%3A%20%22trackTransaction%22%2C%20%20id%3A%20order.order_id%2C%20item%3A%20citems%7D%0A%20%20%20)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
関連
Google関連SEO対策
