GTM - タグ実装ガイド

概要

グーグルタグマネージャーを使ってCriteoタグを実装するには次の説明を参考にしてください。

データレイヤーを挿入する

ページ上にCriteoタグが必要とするデータレイヤーがあるかを確認する。

すでにデータレイヤーがあれば次のステップへ進む。 ステップ.

Criteoタグが必要とするデータレイヤーが無い場合、Criteoの仕様に合った以下のデータレイヤーを参考にすることをお勧めします。

データレイヤーを挿入する

データレイヤーはJavascriptで書かれる変数で、ウェブサイトのHTMLソースコードの中に埋め込む必要があります。
GTMに入れるものではありませんのでご注意ください。

詳細はこちら : グーグルのページ(英語).

お勧めするCriteo仕様のデータレイヤー

HTMLの中でGTMスニペットの後に以下のコードを追加してください。
※注意 : #で囲まれた部分は変数が入ります。それぞれ動的な変数の値を入れてください。

トップページ

次のスクリプトをホームページのソースコードに追加する :

<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        'PageType': 'Homepage', 
        'HashedEmail': '#HASHED EMAIL#' // メールの取得ができない際は、'HashedEmail': '' に設定
    });
</script>

製品一覧ページ

次のスクリプトを製品一覧ページのソースコードに追加する:

<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        'PageType': 'Listingpage',
        'HashedEmail': '#HASHED EMAIL#', 
        'ProductIDList': ['#YOURPRODUCTID_1#','#YOURPRODUCTID_2#','#YOURPRODUCTID_3#']
    });
</script>

製品詳細ページ

次のスクリプトを製品詳細ページのソースコードに追加する:

<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        'PageType': 'Productpage',
        'HashedEmail': '#HASHED EMAIL#', 
        'ProductID': '#YOURPRODUCTID#'
    });
</script>

買い物かごページ

次のスクリプトを買い物かごページのソースコードに追加する:

<script type="text/javascript">
    var products_list = [];
    products_list.push(
    { id: "#First item id#", price: #First item unit price#, quantity: #First item quantity# },
    { id: "#Second item id#", price: #Second item unit price#, quantity: #Second item quantity# }
    /* 商品が増える場合は行を追加する */
    );

    var dataLayer = dataLayer || [];
    dataLayer.push({
        'PageType': 'Basketpage',
        'HashedEmail': '#HASHED EMAIL#', 
        'ProductBasketProducts': products_list
    });
</script>

コンバージョンページ

次のスクリプトをコンバージョンページのソースコードに追加する :

<script type="text/javascript">
    var products_list = [];
    products_list.push(
    { id: "#First item id#", price: #First item unit price#, quantity: #First item quantity# },
    { id: "#Second item id#", price: #Second item unit price#, quantity: #Second item quantity# }
    /* 商品が増える場合は行を追加する */
    );

    var dataLayer = dataLayer || [];
    dataLayer.push({
        'PageType': 'Transactionpage',
        'HashedEmail': '#HASHED EMAIL#', 
        'ProductTransactionProducts': products_list,
        'TransactionID': '#TRANSACTION_ID#'
    });
</script>

新規タグを作成する

1. 新しいタグを追加をクリック

2. 以下のリストに従ってタグに名前をつける

  • Criteo トップページタグ
  • Criteo 製品一覧ページタグ
  • Criteo 製品詳細ページタグ
  • Criteo 買い物カゴページタグ
  • Criteo コンバージョンページタグ

3. タグタイプを選ぶ = カスタムHTMLタグ

トップページタグ

4. HTMLフレームに次のコードをコピーペーストする

留意点 : Eメールの値が暗号文ではなく平文の場合、setEmail イベントはsetEmail で置き換えることもできます。この場合CriteoがEmailの値をハッシュ暗号化して送るので、Criteoのデータベースに平文のEメールが保存されることはありません。

Criteo トップページタグ

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setEmail", email: {{CriteoEmail}} },
    { event: "setSiteType", type: {{CriteoSiteType}} },
    { event: "viewHome" }
    );
</script> 

Criteo 製品一覧ページタグ

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setEmail", email: {{CriteoEmail}} },
    { event: "setSiteType", type: {{CriteoSiteType}} },
    { event: "viewList", item: {{CriteoProductIDList}} }
    );
</script> 

Criteo 製品詳細ページタグ

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setEmail", email: {{CriteoEmail}} },
    { event: "setSiteType", type: {{CriteoSiteType}} },
    { event: "viewItem", item: {{CriteoProductID}} }
    );
</script> 

Criteo 買い物かごページタグ

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setEmail", email: {{CriteoEmail}} },
    { event: "setSiteType", type: {{CriteoSiteType}} },
    { event: "viewBasket", item: {{CriteoProductIDBasket}} }
    );
</script> 

Criteo コンバージョンページタグ

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setEmail", email: {{CriteoEmail}} },
    { event: "setSiteType", type: {{CriteoSiteType}} },
    { event: "trackTransaction" , id: {{TransactionID}}, item: {{CriteoProductIDTrans}} }
    );
</script>

5. 変数を更新する

既存の変数の中に、Criteoのタグが必要とするデータを所持する変数がすでにあるかを確認する。Criteoタグが必要とする変数の詳細についにてはこちらをクリック変数について.

6. 作成したタグを保存する

この時点ではまだトリガーを選択する必要はありません。トリガーを設定するにはこちらをクリック トリガーについて.

7. Criteoの5つのタグをすべて作成する


変数を定義する

上記の手順で作成されたタグに変数を動的に渡す
変数は正式にはマクロと呼ばれ、次のようなフォーマットで宣告する : {{MyVariable}}
変数についてさらに詳しく知るには ここをクリック(英語).

タグが必要とする変数を作成ステップを踏んで作成する

1. 変数をクリックする > ユーザー定義変数 > 新規

2. 以下の表に従って変数に名前をつける

3. 以下の表に従って変数の種類を選択する

4. 渡すデータの変数名を入力

CriteoPartnerID

  • 変数の種類 :  定数
    {{accountid}}

CriteoEmail

  • 変数の種類 : データレイヤーの変数

以下の例のように、既存のデータレイヤーの中にEメールを含む変数があるかを確認する:

HashedEmail

(データレイヤーの中のデータを確認するには、Chromeのコンソールの中で"dataLayer"と打つ)

CriteoSiteType

  • 変数の種類 : カスタム JavaScript

  • ユーザーが見ているサイトがデスクトップ、タブレット、あるいはモバイルかを定義する

    function(){
    return /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d";
    } 

レスポンシブの場合、"d"と固定値で入れることも可能です

CriteoProductID

  • 変数の種類 : データレイヤーの変数

  • 下の例のような、製品IDを含んでいる変数名をデータレイヤーの中から見つけ、入力する:

    ProductID
    

CriteoProductIDList

  • 変数の種類 : データレイヤーの変数

  • ページから、1つ目から3つ目の製品IDを返す変数名を見つけ、入力する

    ProductIDList
    
  • カスタム Javascriptを使ってこの配列を作成することも可能です

CriteoPageType

  • 変数の種類 : データレイヤーの変数

  • ページタイプを含む変数名をデータレイヤーの中から見つけ、入力する: 

    PageType
    

CriteoBasketProducts

  • 変数の種類 : データレイヤーの変数

  • 買い物かごページのデータレイヤーの中から製品ID(複数あればそれらすべて)とその値段、個数を含む変数名を見つけ、入力する

    ProductBasketProducts
    

CriteoTransProducts

  • 変数の種類 : データレイヤーの変数

  • コンバージョンページのデータレイヤーの中から製品ID(複数あればそれらすべて)とその値段、個数を含む変数名を見つけ、入力する

    ProductTransactionProducts
    

TransactionID

  • 変数の種類 : データレイヤーの変数

  • コンバージョンページのデータレイヤーからからトランザクションID(注文番号)を含む変数名を見つけ、入力する

    TransactionID
    

CriteoProductIDBasket

  • 変数の種類 : カスタム javaScript

  • 一般的に、データレイヤーからパスされる{{CriteoBasketProducts}} テーブルは、必ずしもクリテオのタグにフィットする構成になっていません。 そこで、この変数がそれをフィットさせるように再構成します。
    こちらがクリテオタグにフィットするように製品データテーブルを再構成するループの一例となります。{{CriteoBasketProducts}} は買い物かごページの単数、あるいは複数の製品データを返すデータレイヤー変数です。

  • {{CriteoBasketProducts}}は例なので、実際に製品データを含むデータレイヤーの変数名が違う場合はその名前に置き換える
    - nameofproductIDを定義する際,"id"を製品IDを含む実際のフィールド名に置き換える
    - nameofproductPriceを定義する際,"price"を値段を含む実際のフィールド名に置き換える
    - nameofquantityを定義する際,"quantity"を個数を含む実際のフィールド名に置き換える

    function() {
    //タグの中で使うテーブルを定義する
    var products = [];

    var productsCheckout = {{CriteoBasketProducts}};
    var nameofproductID = "id";
    var nameofproductPrice = "price";
    var nameofquantity = "quantity";

    for (var i = 0; i < productsCheckout.length; i++) {
        products.push({ 

            //これは製品IDを代入する一例です。実際のデータレイヤーの構成に基づいてスクリプトを書き換えてください :
            id: productsCheckout[i][nameofproductID], 

            //これは値段を代入する一例です。実際のデータレイヤーの構成に基づいてスクリプトを書き換えてください :
            price: productsCheckout[i][nameofproductPrice],

            //これは個数を代入する一例です。実際のデータレイヤーの構成に基づいてスクリプトを書き換えてください
            quantity: productsCheckout[i][nameofquantity]
        }); 
    }
    return products;
    } 

CriteoProductIDTrans

  • Macro Type : Custom javaScript

  • 一般的に、データレイヤーからパスされる{{CriteoTransProducts}} テーブルは、必ずしもクリテオのタグにフィットする構成になっていません。 そこで、この変数がそれをフィットさせるように再構成します。
    こちらがクリテオタグにフィットするように製品データテーブルを再構成するループの一例となります: {{CriteoTransProducts}} は買い物かごページの単数、あるいは複数の製品データを返すデータレイヤー変数です。

  • {{CriteoTransProducts}}は例なので、実際に製品データを含むデータレイヤーの変数名が違う場合はその名前に置き換える

    • nameofproductIDを定義する際,"id"を製品IDを含む実際のフィールド名に置き換える
    • nameofproductPriceを定義する際,"price"を値段を含む実際のフィールド名に置き換える
    • nameofquantityを定義する際,"quantity"を個数を含む実際のフィールド名に置き換える
    function() {
    //タグの中で使うテーブルを定義する
    var products = [];


    var productsCheckout = {{CriteoTransProducts}};
    var nameofproductID = "id";
    var nameofproductPrice = "price";
    var nameofquantity = "quantity";

    for (var i = 0; i < productsCheckout.length; i++) {
        products.push({ 

            //これは製品IDを代入する一例です。実際のデータレイヤーの構成に基づいてスクリプトを書き換えてください :
            id: productsCheckout[i][nameofproductID], 

            //これは値段を代入する一例です。実際のデータレイヤーの構成に基づいてスクリプトを書き換えてください :
            price: productsCheckout[i][nameofproductPrice],

            //これは個数を代入する一例です。実際のデータレイヤーの構成に基づいてスクリプトを書き換えてください
            quantity: productsCheckout[i][nameofquantity]
        }); 
    }
    return products;
    } 

トリガーを作成する

最後に、設定したタグの発火ルールを決める
このチュートリアルでは例として {{CriteoPageType}}の変数を使う

1. トリガーをクリック > 新規

2. 名前とルールを以下の表に従って定義する

Homepage

  • トリガーのタイプ DOM ready
  • PageType が Homepageに等しい

Listing page

  • トリガーのタイプ DOM ready
  • PageType が Listingpageに等しい

Product page

  • トリガーのタイプ DOM ready
  • PageType が Productpageに等しい

Basket page

  • トリガーのタイプ DOM ready
  • PageType が Basketpageに等しい

Transaction page

  • トリガーのタイプ DOM ready
  • PageType が Transactionpageに等しい

3. 保存する

4. それぞれのタグに合ったトリガーを付与する

a) タグのどれかひとつをクリックする

b) 作成したタグにトリガーを追加

c) タグに合ったトリガーを選択する

d)この手順ですべてのCriteoタグにトリガーを付与する

公開

1. 右上の公開をクリックする

2. 新しいバージョン名を記入し、公開をクリックする

3. Criteoタグがウェブサイトに配信される