Criteo広告とグーグルタグマネージャーでの連携方法

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="&lt;script&gt;" title="&lt;script&gt;" />

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="&lt;script&gt;" title="&lt;script&gt;" />

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="&lt;script&gt;" title="&lt;script&gt;" />
<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="&lt;script&gt;" title="&lt;script&gt;" />

商品タグ

商品タグは以下のように設置しました。今回の設置したページは製品一覧ページと商品ページが合わさったコンテンツでしたので、以下のようになりました。

<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="&lt;script&gt;" title="&lt;script&gt;" />
<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="&lt;script&gt;" title="&lt;script&gt;" /> 

カートタグ

カートタグは以下に設置しました。カートで必要な情報（価格や数量）は動的に取得できるようにしています。

<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="&lt;script&gt;" title="&lt;script&gt;" />
<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="&lt;script&gt;" title="&lt;script&gt;" /> 

コンバージョン

カートタグは以下に設置しました。カートで必要な情報（価格や数量）は動的に取得できるようにしています。

<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="&lt;script&gt;" title="&lt;script&gt;" />
<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="&lt;script&gt;" title="&lt;script&gt;" />