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データで用意します。

 

 

なお必須の項目は以下となります。

 

ただ、掲載終了の商品や在庫切れの商品などを無駄に掲載してしまうと、誤った広告を配信することになり、
常に情報を最新にする必要があります。

 

配信するタグの設置

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を設定します（以下が設定例）。

<script type="text/javascript">
dataLayer = dataLayer || [];
dataLayer.push({
'PageType': 'ProductPage',
'ProductID': 'ProductID'
});
</script>

CriteoProductIDList

リストページ上の3つの商品の商品IDのリストを設定します。

<script type="text/javascript">
dataLayer = dataLayer || [];
dataLayer.push({
'PageType':'ListingPage',
'ProductIDList' : ['ProductID_1', 'ProductID_2', 'ProductID_3']
});
</script>

CriteoBasketProducts

カートページ上の商品情報(商品IDや数量、価格など)を設定します。

CriteoTransProducts

購入完了ページ上の商品情報を設定します。

仕様については以下を確認してください。
https://support.criteo.com/s/article?article=204851311-Google-Tag-Manager-Variables&language=ja

 

Criteoの実際の設定例

今回は、リストページ存在しないHPでしたので、トップページタグ、商品タグ、カートタグ、コンバージョンタグの4つを設定しました。

トップページタグ

トップページタグは以下のように設置しました。こちらは仕様通りで、コピーするときはアカウントを実際のCriteoIDに変えてください。

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
var ua = navigator.userAgent;// jquery
var setSiteType = "d";
if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
// スマートフォン用コード
setSiteType = "m";
} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
setSiteType = "t";
}

window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
{ event: "setAccount", account: 0000 },
{ event: "setSiteType", type: setSiteType },
{ event: "viewHome" }
);
</script>

商品タグ

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

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
      var ua = navigator.userAgent;// jquery
	var setSiteType = "d";
	if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
		// スマートフォン用コード
		setSiteType = "m";
	} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
		setSiteType = "t";
	}
  
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
    { event: "setAccount", account: 0000 },
    { event: "setSiteType", type: setSiteType},
    { event: "viewItem", item: "kokusan"}
      );
</script> 

カートタグ

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

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
    var ua = navigator.userAgent;// jquery
	var setSiteType = "d";
	if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
		// スマートフォン用コード
		setSiteType = "m";
	} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
		setSiteType = "t";
	}
  
  function getItem() {
    var pi = document.getElementsByTagName('meta');
    for(i=0;i<pi.length;i++){
      if(pi[i].getAttribute("property")=="etm:cart_item"){
        return JSON.parse(pi[i].getAttribute("content"));
      }
    }
    return "";
  }
  
  var items = getItem();
  var citems = [];
  for(i = 0; i < items.length; i++) {
    citems[i] = {"id": {{criteo_ids}}[items[i].goods], "price": items[i].price, "quantity": items[i].qty};
  }
  //console.log(citems);
      window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
    { event: "setAccount", account: 0000 },
    { event: "setSiteType", type: setSiteType},
    { event: "viewBasket", item:citems}
    );
</script> 

コンバージョン

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

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
    var ua = navigator.userAgent;// jquery
	var setSiteType = "d";
	if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
		// スマートフォン用コード
		setSiteType = "m";
	} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
		setSiteType = "t";
	}
  
  function getItem() {
    var pi = document.getElementsByTagName('meta');
    for(i=0;i<pi.length;i++){
      if(pi[i].getAttribute("property")=="etm:conversion_detail"){
        return JSON.parse(pi[i].getAttribute("content"));
      }
    }
    return "";
  }
  var items = getItem();
  var citems = [];
  for(i = 0; i < items.length; i++) {
     //citems[i] = {"id": items[i].goods, "price": items[i].price, "quantity": items[i].qty};
    citems[i] = {"id": {{criteo_ids}}[items[i].goods], "price": items[i].price, "quantity": items[i].qty};
  }
  //console.log(citems);
  function getOrderId() {
    var pi = document.getElementsByTagName('meta');
    for(i=0;i<pi.length;i++){
      if(pi[i].getAttribute("property")=="etm:conversion"){
        return JSON.parse(pi[i].getAttribute("content"));
      }
    }
    return "";
  }
  var order = getOrderId();

  window.criteo_q = window.criteo_q || [];
  window.criteo_q.push(
    { event: "setAccount", account: 0000 },
    { event: "setSiteType", type: setSiteType},
    { event: "trackTransaction",  id: order.order_id, item: citems}
   );
</script>