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>

留意点： 'HashedEmail'のユーザーのメールアドレスは、SHA256でハッシュ化して代入してください。

製品一覧ページ用のデータレイヤー¶

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

<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        'PageType': 'Listingpage',
        'HashedEmail': '#HASHED EMAIL#', 
        'ProductIDList': ['#YOURPRODUCTID_1#','#YOURPRODUCTID_2#','#YOURPRODUCTID_3#']
        // 上位3点までの商品IDを実装
    });
</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 買い物カゴページタグ
Criteo コンバージョンページタグ

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

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

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 || [];
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setEmail", email: {{CriteoEmail}}, hash_method: "sha256" },
    { event: "setSiteType", type: {{CriteoSiteType}} },
    { event: "viewHome" }
    );
</script>

Criteo 製品一覧ページタグ¶

<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setEmail", email: {{CriteoEmail}}, hash_method: "sha256" },
    { event: "setSiteType", type: {{CriteoSiteType}} },
    { event: "viewList", item: {{CriteoProductIDList}} }
    );
</script>

Criteo 製品詳細ページタグ¶

<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setEmail", email: {{CriteoEmail}}, hash_method: "sha256" },
    { event: "setSiteType", type: {{CriteoSiteType}} },
    { event: "viewItem", item: {{CriteoProductID}} }
    );
</script>

Criteo 買い物かごページタグ¶

<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setEmail", email: {{CriteoEmail}}, hash_method: "sha256" },
    { event: "setSiteType", type: {{CriteoSiteType}} },
    { event: "viewBasket", item: {{CriteoProductIDBasket}} }
    );
</script>

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

<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
    { event: "setAccount", account: {{CriteoPartnerID}} },
    { event: "setEmail", email: {{CriteoEmail}}, hash_method: "sha256" },
    { event: "setSiteType", type: {{CriteoSiteType}} },
    { event: "trackTransaction" , id: {{TransactionID}}, item: {{CriteoProductIDTrans}} }
    );
</script>

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

この時点ではまだトリガーを選択する必要はありません。トリガーの設定は本ガイドの最後に行います。

6. 以下のように、Criteoの５つのタグ + 動的ローダータグの作成を完了する。¶

３．変数を定義する¶

上記の手順で作成されたタグに、動的に値を渡す記号を変数と言います。
変数はGTM内で次のようなフォーマットで使用ができます。例：{{CriteoPartnerID}}
変数について詳細はこちらのガイドをご参考ください。変数について

タグが必要とする変数を、以下の手順で作成する

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¶

変数の種類 : データレイヤーの変数
ページから、１つ目から３つ目の製品IDを返す変数名を見つけ、入力する
```
ProductIDList
```

CriteoPageType¶

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

CriteoProductIDBasket¶

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

CriteoProductIDTrans¶

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

TransactionID¶

変数の種類 : データレイヤーの変数
コンバージョンページのデータレイヤーからからトランザクションID（注文番号）を含む変数名を見つけ、入力する
```
TransactionID
```

４．トリガーを作成する¶

最後に、設定したタグの発火ルールを決める
このチュートリアルでは例として {{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タグにトリガーを付与する¶

e)　「Criteo 動的ローダータグ」は「All Pages」トリガーを選択する¶

５．公開¶

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

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

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

Field	Overview	Example	Syntax	Required
Email Address	Email address in plain text (if allowed by the law in your country), sha256 hashed email address or MD5 hashed email address.	79054025255fb1a26e4bc422aef54eb4...	- Plain text emails - Sha256 and md5 hashed emails	Required
Hash Method	The hashing method used for the email. - Doesn't need to be included for plain text emails - For sha265 hashed emails: "sha256" - For md5 hashed emails: "md5"	sha256	String	Required

Field

Overview

Example

Syntax

Required

Email Address

Email address in plain text (if allowed by the law in your country), sha256 hashed email address or MD5 hashed email address.

79054025255fb1a26e4bc422aef54eb4...

- Plain text emails
- Sha256 and md5 hashed emails

Required

Hash Method

The hashing method used for the email.
- Doesn't need to be included for plain text emails
- For sha265 hashed emails: "sha256"
- For md5 hashed emails: "md5"

sha256

String

Required

<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: YOUR_PARTNER_ID}, { event: "setEmail", email: "useremail@somedomain.com" }, { event: "setEmail", email: "", hash_method: "sha256" }, { event: "setEmail", email: "", hash_method: "md5" }, { event: "setSiteType", type: deviceType}, { event: "viewHome" } ); </script>

<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: YOUR_PARTNER_ID}, { event: "setEmail", email: "" }, { event: "setEmail", email: "79054025255fb1a26e4bc422aef54eb4...", hash_method: "sha256" }, { event: "setEmail", email: "3242asd342421...", hash_method: "md5" }, { event: "setSiteType", type: deviceType}, { event: "viewHome" } ); </script>

필드	개요	예시	구문	필수
Email Address	sha256 해시된 이메일 주소와 MD5 해시된 이메일 주소.	79054025255fb1a26e4bc422aef54eb4....	- sha256 및 md5 해시된 이메일	필수
Hash Method	이메일에 사용된 해싱 방법. - sha256 및 md5로 이메일을 해시화 할 것 - sha265 해시된 이메일의 경우: "sha256" - md5 해시된 이메일의 경우: "md5"	sha256, md5	문자열	필수

필드

개요

예시

구문

필수

Email Address

sha256 해시된 이메일 주소와 MD5 해시된 이메일 주소.

79054025255fb1a26e4bc422aef54eb4....

- sha256 및 md5 해시된 이메일

필수

Hash Method

이메일에 사용된 해싱 방법.
- sha256 및 md5로 이메일을 해시화 할 것
- sha265 해시된 이메일의 경우: "sha256"
- md5 해시된 이메일의 경우: "md5"

sha256, md5

문자열

필수

<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: }, { event: "setEmail", email: "79054025255fb1a26e4bc422aef54eb4...", hash_method: "sha256" }, { event: "setEmail", email: "3242asd342421...", hash_method: "md5" }, { event: "setSiteType", type: deviceType}, { event: "viewPage" } ); </script>

GTM - タグ実装ガイド¶

概要¶

１．データレイヤーを挿入する¶

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

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

トップページ用のデータレイヤー¶

製品一覧ページ用のデータレイヤー¶

製品詳細ページ用のデータレイヤー¶

買い物かごページ用のデータレイヤー¶

コンバージョンページ用のデータレイヤー¶

２．新規タグを作成する¶

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

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

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

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

Criteo 動的ローダータグ¶

Criteo トップページタグ¶

Criteo 製品一覧ページタグ¶

Criteo 製品詳細ページタグ¶

Criteo 買い物かごページタグ¶

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

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

6. 以下のように、Criteoの５つのタグ + 動的ローダータグの作成を完了する。¶

３．変数を定義する¶

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

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

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

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

CriteoPartnerID¶

CriteoEmail¶

CriteoSiteType¶

CriteoProductID¶

CriteoProductIDList¶

CriteoPageType¶

CriteoProductIDBasket¶

CriteoProductIDTrans¶

TransactionID¶

４．トリガーを作成する¶

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

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

Homepage¶

Listing page¶

Product page¶

Basket page¶

Transaction page¶

3. 保存する¶

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

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

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

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

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

e) 「Criteo 動的ローダータグ」は「All Pages」トリガーを選択する¶

５．公開¶

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

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

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

Plain text example

Hashed Emails Example

해시된 이메일 예시

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

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

e)　「Criteo 動的ローダータグ」は「All Pages」トリガーを選択する¶