tag imple v1...会員タグは、xrossdataのタグが発行するクッキーIDと会員IDを紐付けるためのタグです。会員IDがログで通知されると、xrossdataはアクションの有無に関わらずCookieIDと会員

h t t p : / / w w w . x d a t a . j p /Copyright © Tribeck Storategies Inc. All right Reserved.

L I T E . M a r k e t i n g A u t o m a t i o n

タグ実装について

ver 1.04


2

はじめにこの資料は、xross dataにログを送信するための基本的なタグ設置方法について説明しています。タグ実装は以下の3種類があります。

1. xross dataのタグコントローラーを利用して実装2. HTMLにベタに貼り付けて実装3. GTMなどのタグマネジメントツールを利用して実装

ここで説明するのは、１と２を組み合わせた方法です。

商品データなどカスタムパラメータの送信方法は以下の2つがあります。

1. カスタムパラメータをHTML内にカスタムタグとして設置する2. DOM要素から取得してカスタムパラメータとして送信する

DOM要素から取得する場合は、リニューアルなど要素が変更になるとログ送信できなくなる可能制があるため、カスタムタグとしてHTML内にカスタムパラメータを設置する方法をオススメしております。

注意事項）

• サイトの作りによっては、当資料に記載される実装方法では対応できないケースがあります。• 当資料のJavaScriptは、jQueryが読み込まれていることを前提として書かれています。

タグコントローラーとは？タグコントローラーは、管理画面上からxross dataのタグを制御できるタグマネージャーのような機能です。使い方はヘルプサイトをご覧ください。


ECサイトでの基本的なアクション

3

購入完了購入したトランザクション情報を取得するアクション。

アクションに必要な情報をログ送信するためのカスタムタグをHTML内に設置して頂きます。カスタムタグ

商品閲覧閲覧した商品情報を取得するアクション。

会員登録会員登録した情報を取得するアクション。

xross dataでリターゲティングメールを実施する際に必要なアクションです。

その他、任意のアクションを取得することで、アクションを活用したセグメントを行うことができます。

カスタムタグ

カスタムタグ

カスタムタグ

カート表示カートに入っている商品情報を取得アクション

カスタムタグ

カートに投入

カートから削除

カートに投入した商品情報を取得するアクション。

カートから削除した情報を取得するアクション。

サイトの仕組み上、カート投入・削除アクションの導入が難しい場合

注意事項）カート表示アクションは、カート分析機能へのレポートに対応しないため、非推奨となっております。“カート放棄”を計算する目的で利用し、レポート参照はしない場合にご利用ください。


4

共通タグ

<script src=“//log1.mobylog.jp/__xdtc/サイトID.js" charset="UTF-8"></script></body></html>

• タグは設定画面の [ タグの取得 – JavaScriptタグ ] から取得します。• サイトIDは取得時に設定されています。• body閉じタグの直前でならないということではありません。

共通タグは、全画面で共通フッターに貼り付け


5

会員タグxross dataのクッキーIDと会員IDを紐付けるタグ

会員タグは、xross dataのタグが発行するクッキーIDと会員IDを紐付けるためのタグです。会員IDがログで通知されると、xross dataはアクションの有無に関わらずCookie IDと会員IDを紐付けて管理します。

<script>/* 会員IDパラメタの代入 */__cltId = "会員ID";

/* 顧客属性カスタムパラメータ */__custom_param = {

'sex' : '0:不明 / 1:男性 / 2:女性','prefectural’ : '東京都','birth_dt' : '1988/01/01'

}; '

</script>

HTMLにベタ貼り

• ログインユーザーの会員IDをCookieに保存していたり、DOM要素に入っている場合は、そこから値を取得して__cltIdパラメータに代入するJavaSciptをタグコントローラー -共通ルールのカスタムスクリプトに設定して対応することも可能です。

• 会員マスターのインポートをして会員属性を登録する場合は顧客属性パラメータの代入は必要ありません。

通知するパラメータ

• 会員ID（必須）• その他属性情報（任意）

• __cltIdにNULL値が代入された場合は無視されます。


6

会員タグを設置する画面会員タグはログイン後のページで貼り付けることが一般的です。ログインはサイトの仕様により異なり、アクションを通知するポイントが複数になるケースがあります。

• ログイン後にマイページに遷移する

• 購入フローに遷移する時にログインする

この場合は、それぞれのページで会員タグを出力します。

ログイン画面マイページ画面

カート画面ログイン画面配送先設定画面

ログインアクション通知

ログインアクション通知

• ログイン後はすべてのページで会員タグを出力する方法でも問題ありません。


7

商品閲覧

ブラウザ放棄施策とは？

商品閲覧後、未購入の会員に対して、閲覧した商品をメールでリマインドする施策のことを指します。

計算式）ブラウザ放棄対象の会員 =商品閲覧した会員 -購入した会員

xross dataでブラウザ放棄施策を実施するにあたり必要なアクションが商品閲覧です。

商品閲覧履歴リマインド

購入促進

ページを閲覧したが、その後購入のない商品をオススメ

商品閲覧

購入完了

購入yes

n日後

no

セグメンテーション：n日前に商品ページをn回以上閲覧したが、その後購入していない会員


88

商品閲覧タグコントローラーの設定

タグコントローラーで新規のルールを作成します。

通知するアクション

• 商品閲覧（view）

アクション通知条件

• ここで設定した条件にマッチした時に商品閲覧アクションを通知します。

• URLもしくはクエリパラメータを条件にすることができます。

• この例は、URLが "/viewProduct" に部分一致した場合にアクションを通知します。


9

商品閲覧商品詳細ページで閲覧している商品の情報をカスタムタグで設置


• 商品ID（必須）• 商品名（必須）★• 商品画像URL（必須）★• 商品ページURL（必須）★• 商品単価（任意）★• カテゴリID（任意）• カテゴリ名（任意）• その他の情報（任意）

<script>

__custom_param = {'pid' : '商品ID','p_name' : '商品名','p_price' : 商品単価, // カンマ無し'p_img_url': '商品画像URL','view_url' : '商品ページURL','ctgid' : '商品カテゴリID','ctg_name' : '商品カテゴリ名'

};

</script>

カスタムタグの例 –共通タグより上部に設置カスタムタグ

★の項目について商品マスターのインポート機能で、商品情報をxross dataにインポートする場合は商品IDのみ必須項目となります。• HTMLメールでリテンションメールを送信しない場合、画像URLは必要ありません。• カートに直リンクできるサイトの場合、商品ページURLは必要ありません。

ログ送信する商品情報について

DOM要素から商品情報を取得して送信する場合は、このカスタムタグは必要ありません。その場合はDOM要素を取得してログ送信するJavaScriptをタグコントローラーのカスタムタグに設置します。尚、DOM要素から取得する場合、リニューアルなどでDOM要素に変更が発生すると、ログが正常に取得できなくなりますので注意が必要です。


10

カート投入とカート削除

カート放棄施策とは？

カート投入後、未購入の会員に対して、カートに入ったままの商品をメールでリマインドする施策のことを指します。

計算式）カート放棄対象の会員 = （カート投入商品 - カート削除商品）した会員 - 購入した会員

カートに投入したが、その後購入のない商品をオススメ

カート投入

購入完了

購入yes

n日後

no

セグメンテーション：n日前に商品をカートに入れたが、その後購入していない会員

xross dataでカート放棄施策を実施するにあたり必要なアクションがカート投入とカート削除です。

カート放棄リマインド

購入促進


11

カートに投入カートに投入アクションは、カスタムタグではログ送信できません。なぜなら色や数量、サイズなど、ユーザーの操作により送信すべきログの情報が変わるためです。

カートに投入アクションは、買い物カゴに入れるボタンが存在する全てのページで送信すなければなりません。また、カート画面で数量変更が発生した場合も通知する必要があります。

カートに投入アクションは、基本的にタグコントローラーのカスタムスクリプト欄にカート投入アクションを通知するためのJavaScriptを設定します。

商品詳細ページカートページ


1212

カートに投入 –商品詳細画面商品詳細画面においてカートに入れるボタンクリック時にカート投入アクションを通知


• 商品ID（必須）• 商品名（必須）★• 商品画像URL（必須）★• 商品ページURL（必須）★• 商品点数（必須）• 商品単価（必須）• カテゴリID（任意）• カテゴリ名（任意）• その他の情報（任意）

$('.cart_button').click(function() {

/* カート投入アクションの設定 */__action = 'cartin';

/* DOM要素から設定された商品点数を取得して代入 */__custom_param.p_num = $('#p-num').val();

/* ログ送信 */__push_beacon( __getURL() );

});

タグコントローラー「商品閲覧」ルールのカスタムスクリプトに設置するJavaScriptの例


• 商品詳細ページに設置したカスタムタグはログ送信時に引き継がれるため、ここでの設定は必要ありません。

• 数量が「#p-num」としてDOM要素に存在していることを前提としています。• ログ送信では、aタグのhref属性が優先されてしまい、クリックイベントをトリガーにした関数が実行される前に画面遷移してしまうケースがあります。この場合、__push_beacon()関数の第二引数に遷移先URLを指定することで回避できます。

• FormのSubmitやonClickイベントで処理をする場合は別途お問い合わせください。


13

カートに投入 –カート画面タグコントローラーの設定



• カート操作


• ここで設定した条件にマッチした時にカート操作アクションを通知します。


• ここでは、URLが cart.phpに部分一致した場合にアクションを通知します。

カート操作アクション自体は、重要なアクションではありません。カート画面における商品点数の加算や減算、カートから削除のアクションを通知するためのカスタムスクリプトを設定するだけに使われるルールです。


14

カートに投入 –カート画面

加算したタイミングで、加算した数量をp_numに代入して通知します。加算後の数量ではありませんのでご注意ください。

カート画面で数量を加算された時に通知


• 商品ID（必須）• 商品名（任意）• 商品画像URL（任意）• 商品ページURL（任意）• 商品点数（必須）• 商品単価（任意）• カテゴリID（任意）• カテゴリ名（任意）• その他の情報（任意）

$('.add_button').click(function() {

/* カート投入アクションの設定 */__action = 'cartin';

/* DOM要素から設定された商品点数を取得して代入 */__custom_param = {

pid : '商品ID', // 加算された商品IDp_num : 1 // 加算した数

};


});

タグコントローラー「カート」ルールのカスタムスクリプトに設置するJavaScriptの例

• 商品詳細ページの買い物カゴに入れるボタンでは、商品詳細ページのカスタムタグによって既に商品情報セットされているために、商品点数（p_num）のみの通知で問題ありませんが、カート画面の加算では、商品情報がセットされていないため、加算される商品の情報を任意にセットする必要があります。

• ログ送信では、aタグのhref属性が優先されてしまい、クリックイベントをトリガーにした関数が実行される前に画面遷移してしまうケースがあります。この場合、__push_beacon()関数の第二引数に遷移先URLを指定することで回避できます。



15

カートから削除カートから削除アクションは、カート画面において

• 削除ボタンで商品自体をカートから削除• 商品点数の減算

が実行された時にログを送信します。

カートから削除アクションは、基本的にタグコントローラーのカスタムスクリプト欄にカートから削除アクションを通知するためのJavaScriptを設定します。

カートから削除アクションは非常に重要です。なぜなら、カートから削除した商品の消し込みを行わないと、カートに残ったまま記録されるため、ユーザーが実際に削除した商品がリテンションメールに含まれることになるためです。


16

カート画面で、商品の数量を減算された時もしくは商品自体を削除されたログを通知します。減算の場合、減算後の数量ではなく減算された数量を通知する必要があります。

カート画面で数量の減算もしくは削除された時に通知


• 商品ID（必須）• 商品点数（必須）• その他商品情報は任意

$('.del_button').click(function() {

/* カート投入アクションの設定 */__action = 'cartout';

/* DOM要素から設定された商品点数を取得して代入 */__custom_param = {

pid : '商品ID', // 減算された商品IDp_num : 1 // 減算した数

};


});

タグコントローラー「カート」ルールのカスタムスクリプトに設置するJavaScriptの例

カートから削除

• カートから削除のアクションは、投入された商品の消し込みに使われるため、基本的に商品IDと商品点数のみ通知すれば問題ありません。

• ログ送信では、aタグのhref属性が優先されてしまい、クリックイベントをトリガーにした関数が実行される前に画面遷移してしまうケースがあります。この場合、__push_beacon()関数の第二引数に遷移先URLを指定することで回避できます。



17

購入完了購入完了アクションは、xross dataに記録されているカート放棄情報や商品閲覧放棄情報をクリアするためのアクションです。

また、施策別の売上金額や購入ランキングなどのレポートにも反映される重要なアクションとなります。


18

購入完了



• 購入


• ここで設定した条件にマッチした時に購入アクションを通知します。


• ここでは、URLが order_complete.php に部分一致した場合にアクションを通知します。

タグコントローラーの設定

dataLayerでトランザクション情報をHTMLに設置している場合、dataLayerを利用するにチェックを入れると、dataLayerから情報を取得してログ送信します。この場合、xross dataのトランザクション用カスタムタグの設置は必要ありません。尚、eコマース変数プラグインは取得できないケースがあり、精度が低いためお勧めしておりません。


1919

購入完了購入完了画面にて、トランザクション情報を通知


• 注文番号（必須）• 受注金額（必須）• 送料（任意）• 決済方法（任意）• 代引き手数料（任意）• 商品ID（必須）• 商品名（任意）• 商品単価（任意）• 商品点数（任意）• 商品画像URL（任意）• カテゴリID（任意）• カテゴリ名（任意）

<script>

/* orderアクションと同時に通知するカスタムパラメータの設定 */__custom_param = {

'order_cd' : '注文番号','price' : '受注金額','shipping' : '送料','payment' : '決済方法','cod' : '代引き手数料','pid' : '商品ID（複数購入の場合はコロン区切り）','p_name' : '商品名（複数購入の場合はコロン区切り）','p_price' : '商品単価（複数購入の場合はコロン区切り）','p_num' : '商品点数（複数購入の場合はコロン区切り）','p_img_url' : '商品画像URL（複数購入の場合はコロン区切り）','ctgid' : 'カテゴリID（複数購入の場合はコロン区切り）','ctg_name' : 'カテゴリ名（複数購入の場合はコロン区切り）'

};

</script>

• 購入アクションをトリガーにしたリテンションメールをしない場合、任意項目は必要ありませんが、レポート画面で表示される項目となりますので、入れることをお勧めします。

トランザクション用カスタムタグの例 –共通タグより上部に設置

購入アクションについて購入アクションが通知されると、xross dataで保持している該当の会員のカート情報がクリアされます。

カスタムタグ


20

会員登録会員登録アクションの記録は、会員登録後未購入の会員に対して訪問促進のリテンション施策を実施する場合に有効なアクションとなります。

また、新規会員に対して、xross dataのクッキーIDと会員IDを紐付ける一番最初のアクションになりますので、会員登録アクションは取得することをお勧めしています。


21

会員登録



• 会員登録


• ここで設定した条件にマッチした時に会員登録アクションを通知します。


• ここでは、URLが member_complete.php に部分一致した場合にアクションを通知します。



22


• 会員ID（必須）• 他の属性情報（任意）

カスタムタグの例 –共通タグより上部に設置

会員登録完了画面で会員タグを出力します。

会員登録

カスタムタグ

<script>/* 会員IDパラメタの代入 */__cltId = "会員ID";

/* 顧客属性カスタムパラメータ */__custom_param = {

'sex' : '0:不明 / 1:男性 / 2:女性','prefectural’ : '東京都','birth_dt' : '1988/01/01'

}; '

</script>


23

カート表示カート表示アクションは、サイトの仕組み上、カート投入およびカート削除のログ送信ができない場合に、カート放棄状態を計算するための補助的な役割を担うアクションです。

このアクションは以下の制約があります。

1. リアルタイム系のカート放棄施策には利用できません。• リアルタイム系とは、分単位、時間単位で実行する施策をいいます。

2. カート系のレポート画面で情報が正しく集計されません。3. カート投入・削除アクションと併用すると正しく集計がされなくなりますので併用はしないでください。


24

カート表示



• カート表示（cartview）


• ここで設定した条件にマッチした時にカート表示アクションを通知します。


• ここでは、URLが "cart.php" に部分一致した場合にアクションを通知します。


cartviewアクションは、カート投入（cartin）・カート削除（cartout）アクションで集計する「アナリティクス – 分析 – カート」の機能に対応していません。従って、カート分析機能を利用する場合は、後述するカート投入・カート削除アクションの通知の実装を行う必要があります。その場合、cartviewアクションの通知は必要ありません。


25

カート表示カート画面でカートに入っている商品の情報をカスタムタグで設置


• 商品ID（必須）• 商品名（必須）★• 商品点数（必須）• 商品画像URL（必須）★• 商品ページURL（必須）★• 商品単価（任意）★• SKU（任意）★• カテゴリID（任意）★• カテゴリ名（任意）★• その他の情報（任意）★

<script>

__custom_param = {'pid' : '商品ID（複数購入の場合はコロン区切り）','p_name' : '商品名（複数購入の場合はコロン区切り）','p_num' : '商品点数（複数購入の場合はコロン区切り）','p_price' : 商品単価（複数購入の場合はコロン区切り）, // カンマ無し'p_img_url': '商品画像URL（複数購入の場合はコロン区切り）','view_url' : '商品ページURL（複数購入の場合はコロン区切り）','sku' : 'SKU（複数購入の場合はコロン区切り）','ctgid' : '商品カテゴリID（複数購入の場合はコロン区切り）','ctg_name' : '商品カテゴリ名（複数購入の場合はコロン区切り）'

};

</script>

カスタムタグの例 –共通タグより上部に設置カスタムタグ



26

タグ導入サポート

不明点があれば、xross dataサポートチームまでお気軽にお問い合わせください。

また、タグコントローラーを使ったタグ実装をオプション※としてお受けしております。

例えば、カスタムタグの設置が困難である場合、DOM要素から各種情報を取得してアクション通知を行うタグの開発から設定まで、担当スタッフが対応致します。

• ※オプション費用については別途お問い合わせください。• 会員IDの取得など、タグ側の設定だけでは情報取得が困難な場合はお客様側で実装頂く必要があります。

[email protected]

タグ導入サポートを行っております。

Documents

tag imple v1...会員タグは、xrossdataのタグが発行するクッキーIDと会員IDを紐付けるためのタグです。会員IDがログで通知されると、xrossdataはアクションの有無に関わらずCookieIDと会員