GTM - タグ実装ガイド¶

概要¶

Google タグマネージャー（GTM）を利用してCriteoタグを実装する手順を説明します。

Criteoタグは、以下の2つの要素で構成されています：

1. ローダースクリプト - すべてのタグを動作させるためのベースとなるJavaScript。各タグで取得した情報をCriteoのサーバへ送信する役割を担います。
2. タグ（トラッカー） - ページの種類に応じて、ユーザーの行動情報を送るJavaScript

特徴：

• ページの種類（トップページ、商品詳細など）に応じて、実装するタグが異なります。
• サイトのレイアウトを変更したり、閲覧者の目に見える形でバナー等を表示することはありません。
• 非同期で読み込まれるため、基本的にはサイトの表示速度に影響を与えることはありません。

実装の全体像¶

GTMでのCriteoタグ実装は、作業場所によって大きく2つに分かれます。

実装は以下の3ステップで進めます：

1. データレイヤーを実装する（サイトのHTML）
2. GTM上でCriteoタグを設定する（タグ・変数・トリガー）
3. 公開する

ページ種別ごとの実装一覧¶

以下の表は、ページ種別ごとに必要な実装の詳細です。

1. データレイヤーを実装する¶

Criteoタグが必要とするデータレイヤーがサイトに存在するか確認してください。 存在しない場合は、以下のCriteo仕様のデータレイヤーを参考に実装してください。

データレイヤーとは¶

データレイヤーはJavaScriptで記述する変数であり、ウェブサイトのHTMLソースコードに直接埋め込む必要があります。 データレイヤーはGTM側ではなく、サイトのHTMLソースコードに実装してください。

詳細は データレイヤーについて（Google公式ガイド） をご参照ください。

Criteo仕様のデータレイヤー¶

以下のコード中、#...# で囲まれた部分はプレースホルダーです。サイトから動的に取得した値に置き換えて実装してください。

※ HashedEmail にはSHA-256でハッシュ化したメールアドレスを代入してください。メールアドレスの取得ができない場合はパラメータを省略、または空文字を指定してください。（詳細）

ホームページ（トップページ）用¶

ホームページのHTMLソースコードに以下のスクリプトを追加してください。

<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        'PageType': 'Homepage', 
        'HashedEmail': '#HASHED EMAIL#'
        // メールの取得ができない場合は、パラメータを省略するか 'HashedEmail': '' に設定
    });
</script>

一覧ページ用¶

一覧ページのHTMLソースコードに以下のスクリプトを追加してください。

<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        'PageType': 'Listingpage',
        'HashedEmail': '#HASHED EMAIL#', 
        'ProductIDList': ['#YOURPRODUCTID_1#','#YOURPRODUCTID_2#','#YOURPRODUCTID_3#']
        // 上位3点までの商品IDを実装
    });
</script>

商品ページ用¶

商品詳細ページのHTMLソースコードに以下のスクリプトを追加してください。

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

カート・申込みページ用¶

カート・申込みページのHTMLソースコードに以下のスクリプトを追加してください。 ※ カートに複数の商品がある場合は、すべての商品を配列として含めてください。

<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>

コンバージョン（購入完了）ページ用¶

コンバージョンページのHTMLソースコードに以下のスクリプトを追加してください。 ※ 購入されたすべての商品を配列として含めてください。 ※ TransactionID の設定方法は 補足4 を参照してください。 ※ 申込みや資料請求など単価・個数の概念がない商材の場合は 補足5 を参照してください。

<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>

2. GTM上でCriteoタグを設定する¶

GTM管理画面でタグ・変数・トリガーを作成し、Criteoタグの配信設定をおこないます。

2-1. タグを作成する¶

以下の6つのタグを「カスタムHTMLタグ」として作成します。

タグの作成手順¶

1. GTM管理画面で「タグ」>「新規」をクリック

   

2. タグタイプで「カスタムHTML」を選択

   

3. 下記「作成するタグの一覧」からタグ名とコードを参照し、タグ名を入力してコードをHTMLフレームに貼り付ける

4. 保存する（この時点ではトリガーの設定は不要です）

   

5. 6つのタグすべてについて手順1〜4を繰り返す

作成するタグの一覧¶

Criteo ローダースクリプト¶

<!-- Criteo Loader File -->
<script type="text/javascript" src="//dynamic.criteo.com/js/ld/ld.js?a={{CriteoPartnerID}}" async="true"></script>
<!-- END Criteo Loader File -->

Criteo ホームページ（トップページ）タグ¶

<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setSiteType", type: deviceType },
    { event: "setEmail", email: {{CriteoEmail}}, hash_method: "sha256" },
    { event: "viewHome" }
    );
</script>

Criteo 一覧ページタグ¶

<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setSiteType", type: deviceType },
    { event: "setEmail", email: {{CriteoEmail}}, hash_method: "sha256" },
    { event: "viewList", item: {{CriteoProductIDList}} }
    );
</script>

Criteo 商品タグ¶

<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setSiteType", type: deviceType },
    { event: "setEmail", email: {{CriteoEmail}}, hash_method: "sha256" },
    { event: "viewItem", item: {{CriteoProductID}} }
    );
</script>

Criteo カート・申込みページタグ¶

<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setSiteType", type: deviceType },
    { event: "setEmail", email: {{CriteoEmail}}, hash_method: "sha256" },
    { event: "viewBasket", item: {{CriteoProductIDBasket}} }
    );
</script>

Criteo コンバージョンタグ¶

<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setSiteType", type: deviceType },
    { event: "setEmail", email: {{CriteoEmail}}, hash_method: "sha256" },
    { event: "trackTransaction", id: {{TransactionID}}, item: {{CriteoProductIDTrans}} }
    );
</script>

完了すると、以下のようにCriteoの5つのタグ + ローダースクリプトが一覧に表示されます。

2-2. 変数を定義する¶

手順2-1で作成したタグ内の {{...}} はGTM変数です。タグに動的な値を渡すために、以下の手順で各変数を定義してください。

詳細は 変数について（Google公式ガイド） をご参照ください。

作成する変数の一覧¶

共通の作成手順¶

1. GTM管理画面で「変数」>「ユーザー定義変数」>「新規」を選択
2. 上記テーブルの「GTM変数名」を変数名として入力
3. 「変数の種類」列に応じた種類を選択し、「設定する値」列の値を入力
4. 保存

以下、変数の種類ごとに設定方法を説明します。

定数 — CriteoPartnerID¶

変数の種類で「定数」を選択し、CriteoアカウントIDを入力してください。

データレイヤーの変数 — 残り7つ¶

CriteoEmail / CriteoProductID / CriteoProductIDList / CriteoPageType / CriteoProductIDBasket / CriteoProductIDTrans / TransactionID は、すべて「データレイヤーの変数」として作成します。

変数の種類で「データレイヤーの変数」を選択し、上記テーブルの「設定する値」列に記載されたデータレイヤー変数名を入力してください。 これらは手順1でサイトのHTMLに実装したデータレイヤーの変数名と一致させる必要があります。

注意: データレイヤーの変数名はスペルや大文字・小文字を含め完全に一致させてください。

2-3. トリガーを作成し、タグに付与する¶

各タグの発火条件を設定し、対応するタグに紐づけます。 {{CriteoPageType}} 変数を使用してページ種別ごとにトリガーを定義します。

トリガーの一覧¶

トリガーの作成手順¶

1. GTM管理画面で「トリガー」>「新規」をクリック

2. 上記の表に従ってトリガーを作成し、保存する

   

3. タグの一覧から対象のタグをクリック

   

4. トリガーの設定エリアで、上記の表の「対象タグ」列を参考に対応するトリガーを選択

   

   

5. すべてのCriteoタグに対してこの手順を繰り返す

※「Criteo ローダースクリプト」には「All Pages」トリガーを選択してください。

3. 公開する¶

右上の「公開」をクリックして、GTM設定を公開してください。

補足¶

補足1 - メールアドレス（HashedEmail）の設定¶

メールアドレスをタグに代入することで、複数端末を跨いだユーザー識別（クロスデバイス機能）の精度が向上します。

⚠️ 重要：メールアドレスの取り扱いに関する注意事項

平文のメールアドレス（ハッシュ化前の状態）はデータレイヤーに代入しないでください。
（NG例： 'HashedEmail': 'john@company.com'）

事前に必ず以下のルールでハッシュ化をおこなった値を代入してください。

• 小文字のみ使用（大文字は小文字に変換）
• 前後のスペースを削除
• UTF-8でエンコード
• SHA-256でハッシュ化

代入パターンの例¶

1. ハッシュ化して代入する場合
   'HashedEmail': '973dfe463ec85785f5f95af5ba3906eedb2d931c24e69824a89ea65dba4e813b'
2. メールアドレスが取得できないページの場合（パラメータを省略、または空文字を指定）
   'HashedEmail': ''

※ すべてのページで代入する必要はありません。ユーザーがログインしているなど、メールアドレスが取得可能な状態でのみ代入してください。

JavaScriptでのハッシュ化 実装サンプル¶

JavaScriptを利用して動的にハッシュ化をおこなう場合の実装コードサンプルは、以下のCriteo公式ヘルプページ内でご確認いただけます。

• Criteo OneTag Advanced Settings - Email Hashing

補足2 - パラメータ仕様一覧¶

各タグのパラメータに代入する値は、以下のルールに従ってください。

補足3 - ページの種類と業種別対応表¶

取り扱い商材に応じて、各タグを適切なページへ実装してください。

補足4 - Transaction ID¶

コンバージョンタグで取得するTransaction IDは、トランザクションごとに一意の値を取得する必要があります。 通常は注文完了番号などのコンバージョンごとに生成される一意のIDをセットしますが、一意のIDの取得が困難な場合は、コード側でランダムな値を生成して代入してください。

データレイヤーでのランダムID生成例：

<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        'TransactionID': String(Math.floor(Math.random()*99999999999))
    });
</script>

補足5 - 単価/個数の固定値について¶

申込みや資料請求など、商品の単価/個数が動的に代入できない、または必要のない場合は、 単価（price）、個数（quantity）の箇所には固定で 1 と代入して実装してください。

データレイヤーでの実装例：

<script type="text/javascript">
    var products_list = [];
    products_list.push(
    { id: "#物件ID1#", price: 1, quantity: 1 },
    { id: "#物件ID2#", price: 1, quantity: 1 }
    );

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

実装についてご不明な点がございましたら、担当営業までお問い合わせください。¶