ピックアップコラム
-
Pickup!
【2020年】SEO対策会社の特徴(費用)と今後
Criteo広告はご存知でしょうか?Criteo広告はフランスのCriteo社が運営しているリターゲティング型のディスプレイ広告です。Criteo広告は直接HTMLに配信することも可能ですが、グーグルタグマネージャーと連携して設定することも可能です。今回は、Criteoタグの設定仕様と実際のタグマネージャーとの連携方法について解説します。
目次
CriteoはCriteo社が運営しているリターゲティング型のディスプレイ広告です。
リターゲティング広告とは、一度サイトにユーザーに対して、そのユーザーが見ていた商品やそれに近いおすすめの
商品をバナーとともに表示するものです。
Criteoの特徴として、上記のようにyahooニュースと連携しています(その他にもgooや食べログやfacebookなど多数のメディアと連携しています)。
Yahooは月間ページビュー数が2019年11月現在で約150億PV、月間のアクティブユーザー数も2140万ともいわれています。この巨大なサイトに連携しているため、ここからの流入もかなり期待できますね。
また、ワンクリックで商品の詳細ページに遷移できますし、バナーも事前に登録したいファイルをアップすれば自動的生成されます。
Criteo広告を配信するためには、以下の2つが必要です。
Criteo広告には、データフィード(サイトに掲載中の商品の、価格、画像、商品説明文をリスト化したもの)を用意する必要があります。基本的には以下のようにCSVデータで用意します。
なお必須の項目は以下となります。
ただ、掲載終了の商品や在庫切れの商品などを無駄に掲載してしまうと、誤った広告を配信することになり、
常に情報を最新にする必要があります。
Criteoのタグを配信する方法は以下の2つがあります。
Criteoタグの種類は以下の5つです。
このうち商品タグとコンバージョンタグは必須となります。
これはCriteoに配信されているアカウントIDを入力します。
メールアドレスを入力します。ただ省略は可能です。
配信するデバイス(PC向けなのか、スマホ向けなのか、その両方なのか)を記載します。
なお以下のスクリプトを記載します。
function(){return /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d";}
商品ページ上のIDを設定します(以下が設定例)。
<script type="text/javascript"> dataLayer = dataLayer || []; dataLayer.push({ 'PageType': 'ProductPage', 'ProductID': 'ProductID' }); </script>
リストページ上の3つの商品の商品IDのリストを設定します。
<script type="text/javascript"> dataLayer = dataLayer || []; dataLayer.push({ 'PageType':'ListingPage', 'ProductIDList' : ['ProductID_1', 'ProductID_2', 'ProductID_3'] }); </script>
カートページ上の商品情報(商品IDや数量、価格など)を設定します。
購入完了ページ上の商品情報を設定します。
仕様については以下を確認してください。
https://support.criteo.com/s/article?article=204851311-Google-Tag-Manager-Variables&language=ja
今回は、リストページ存在しない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>
受付時間:平日10:00~19:00(土・日・祝日を除く)