GTM - トラベル タグ実装ガイド

概要

グーグルタグマネージャーを使って5つのCriteoタグを実装するには以下のチュートリアルを参考にしてください。

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

  2. タグを作成する

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

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

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

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

    5. マクロを更新する

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

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

  3. 不足しているマクロを設定する

    1. 変数 > 新規をクリック

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

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

    4. 渡すデータを値の中に入力する

  4. 発火ルールを作成する

    1. トリガー > 新規

    2. 以下の表に従って名前をつけ、条件を設定する

    3. 保存

    4. 各タグ用に発火ルールを設定する

  5. 公開

    1. 右上のバージョンを作成をクリックする

    2. 新しいバージョンを保存したら公開をクリックする

    3. クリテオタグがウェブサイトで実行されるようになる

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

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

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

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

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

データレイヤーはJavascriptで書かれる変数で、ウェブサイトのソースコードの中に埋め込まれる必要があります

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

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

HTMLの中でGTMスニペットの後に以下のコードを追加してください。※#は変数の意味です。#がついているものは動的な変数値を入れてください。

トップページ

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

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

製品一覧ページ

次のスクリプトを製品一覧ページのソースコードに追加する:
DateIn, DateOut, Adult, Childはそれぞれ取得可能であれば値を整数の値を入れてください。
取得できない場合は""と入れてください。

日付のテンプレートは次のようにダッシュで区切り、一桁の数字の前にはゼロを入れてください。例:"2017-10-01"

    <script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        'PageType': 'Listingpage',
       'HashedEmail': '#HASHED EMAIL#', 
        'ProductIDList': ['#YOURPRODUCTID_1#','#YOURPRODUCTID_2#','#YOURPRODUCTID_3#'],
        'DateIn' : '#出発日(YYYY-MM-DD)#',
        'DateOut' : '#帰省日(YYYY-MM-DD)#',
        'Adult' : '#大人の数#',
        'Child' : '#子供の数#'
    });
    </script>

製品詳細ページ

次のスクリプトを製品詳細ページのソースコードに追加する
DateIn, DateOut, Adult, Childはそれぞれ取得可能であれば値を整数の値を入れてください。
取得できない場合は""と入れてください。

日付のテンプレートは次のようにダッシュで区切り、一桁の数字の前にはゼロを入れてください。例:"2017-10-01"

    <script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        'PageType': 'Productpage',
       'HashedEmail': '#HASHED EMAIL#', 
        'ProductID': '#YOURPRODUCTID#',
        'DateIn' : '#出発日(YYYY-MM-DD)#',
        'DateOut' : '#帰省日(YYYY-MM-DD)#',
        'Adult' : '#大人の数#',
        'Child' : '#子供の数#'
    });
    </script>

買い物かごページ

次のスクリプトを買い物かごページのソースコードに追加する
DateIn, DateOut, Adult, Childはそれぞれ取得可能であれば値を整数の値を入れてください。
取得できない場合は""と入れてください。

日付のテンプレートは次のようにダッシュで区切り、一桁の数字の前にはゼロを入れてください。例:"2017-10-01"

    <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# }
       /* #add a line for each item in the user's cart# */
    );

    var dataLayer = dataLayer || [];
    dataLayer.push({
        'PageType': 'Basketpage',
       'HashedEmail': '#HASHED EMAIL#', 
        'ProductBasketProducts': products_list,
        'DateIn' : '#出発日(YYYY-MM-DD)#',
        'DateOut' : '#帰省日(YYYY-MM-DD)#',
        'Adult' : '#大人の数#',
        'Child' : '#子供の数#'
    });
    </script>

コンバージョンページ

次のスクリプトをコンバージョンページのソースコードに追加する :
DateIn, DateOut, Adult, Childはそれぞれ取得可能であれば値を整数の値を入れてください。
取得できない場合は""と入れてください。

日付のテンプレートは次のようにダッシュで区切り、一桁の数字の前にはゼロを入れてください。例:"2017-10-01"

    <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# }
       /* #add a line for each item in the user's cart# */
    );

    var dataLayer = dataLayer || [];
    dataLayer.push({
        'PageType': 'Transactionpage',
       'HashedEmail': '#HASHED EMAIL#', 
        'ProductTransactionProducts': products_list,
        'TransactionID': '#THIS_TRANSACTION_ID#',
        'DateIn' : '#出発日(YYYY-MM-DD)#',
        'DateOut' : '#帰省日(YYYY-MM-DD)#',
        'Adult' : '#大人の数#',
        'Child' : '#子供の数#'
    });
    </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}} },
        { event: "viewSearch", din: {{CriteoDateIn}}, dout: {{CriteoDateOut}}, nbra: {{CriteoAdult}}, nbrc: {{CriteoChild}}}
    );
    </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}} },
        { event: "viewSearch", din: {{CriteoDateIn}}, dout: {{CriteoDateOut}}, nbra: {{CriteoAdult}}, nbrc: {{CriteoChild}}}
    );
    </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}} },
        { event: "viewSearch", din: {{CriteoDateIn}}, dout: {{CriteoDateOut}}, nbra: {{CriteoAdult}}, nbrc: {{CriteoChild}}}
    );
    </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}} },
        { event: "viewSearch", din: {{CriteoDateIn}}, dout: {{CriteoDateOut}}, nbra: {{CriteoAdult}}, nbrc: {{CriteoChild}}}
    );
    </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;
    } 

CriteoDateIn

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

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

    DateIn
    

CriteoDateOut

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

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

    DateOut
    

CriteoAdult

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

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

    Adult
    

CriteoChild

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

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

    Child
    

トリガーを作成する

最後に、設定したタグの発火ルールを決める
このチュートリアルでは例として {{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タグがウェブサイトに配信される