「https」~「パラメータ部分」までブラウザのURL欄の全体が取得されます。
ドメインが変わる場合や、URLに付属するパラメータで判断したい場合はPage URLを使用することが多いです。
「ドメイン以降の部分」~「パラメータ部分の直前」までが取得されます。
Page Pathでパラメータ名で判断はできません。
・JavaScriptを組み込みます
・JSタグ内で広告主WEBサイトから値を取得してそのまま使用します
・トリガーとしてWEBサイト上の値を条件にして使用します
=GTMで使いたい変数をサイト側から通知できる機能です。広告主サイト側で送りたい値や変数の中身をMGTMで定義した変数のデータレイヤーの変数名と同じ名称に設定すると、値をGTMへ渡せます。
"items": [ { "code": "{{itemCode}}", "price": {{price}}, "quantity": {{quantity}} },
└上記のように設定してしまうと、ECサイト等での複数商品購入時には正しく反映されません。
ECサイトをご利用の広告主様は以下手順をご参照ください。
設定例
※GTM上の変数名とデータレイヤーの変数名は任意となります。
本マニュアルは、一例として以下の変数名で設定する場合の実装方法となります。
【1】広告主様サイトのHTML上に直接設置するdataLayer
広告主様のショップで以下変数をお持ちの場合の例
・商品コード :{% item_sku %}
・商品単価 :{% item_price %}
・商品個数 :{% item_quantity %}
・購入合計金額:{% purchase_price %}
・注文番号 :{% order_no %}
▼設置いただくdataLayer書式
※CVタグより前に読み込ませる必要がございますため、
<head>部分への設置を推奨しております
var items = [{"code":"{% item_sku %}","price":{% item_price %},"quantity":{% item_quantity %}},];
// GTMへのデータプッシュ
dataLayer.push({
'ordernumber': '{% order_no %}',
'totalprice': {% purchase_price %},
items,
})
↓↓実際のユーザー購入時の反映例↓↓
(例)「apple」という300円の商品2個&「orange」という200円の商品1個購入した場合
(注文番号:10005)
var items = [{"code":"apple","price":300,"quantity":2},{"code":"orange","price":200,"quantity":1},];
// GTMへのデータプッシュ
dataLayer.push({
'ordernumber': '10005',
'totalprice': 800,
items,
})
【2】GTM側の変数設定
商品コード、商品単価、商品個数は、
datalayer内で<items>という名前の値に3つまとめて配列として値を渡しているため、
それぞれを改めてGTM上に変数登録をする必要はありません。
「注文番号:{% order_no %}」と、
「購入合計金額:{% purchase_price %}」に関しては、
datalayer内<items>の中の配列に含まれていない値となるため、
GTM上での変数の登録が必要です。
※先述の通り、各変数名自体は任意となり、あくまで今回の場合の例となります
①注文番号用
データレイヤーの変数名:ordernumber
登録画面左上変数名:A8ordernumber
②購入合計金額用
データレイヤーの変数名:totalprice
登録画面左上変数名:A8totalprice
▼①の場合の実際の設定画面
【3】GTM側のCVタグ
GTM内カスタムHTMLタグとして設定するCVタグは、
上記の例で設定した場合、以下書式となります。
<span id="a8sales"></span>
<script src="//statics.a8.net/a8sales/a8sales.js"></script>
<script>
a8sales({
"pid": "s000000********",
"order_number": "{{A8ordernumber}}",
"currency": "JPY",
"items": {{items}},
"total_price": {{A8totalprice}}
});
</script>
▼広告主サイトのhtml(datalayer)
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
dataLayer.push({
"event" : "purchase",
"ecommerce" : {
"currency" : "JPY",
"value" : "200",
"transaction_id" : "012345",
"items" : [ {
"item_id" : "ABC123",
"price" : "100",
"quantity" : "2"
・
・
・
上記のようなdatalayerを組んでいる場合、「ecommerce」という配列({}で囲んでいる)の中に各値があるため、変数の設定内「変数名」は以下のように設定が必要
「ecommerce.transaction_id」
「ecommerce.item_id」
「ecommerce.quantity」
「ecommerce.value」
入力フォームと成果ページの URL が同じ場合におけるコンバージョンの計測によく使用します。
指定したID名または指定した要素名の箇所で、画面に表示されているテキスト文字を取得するものです。
トリガータイプがDOM Ready用の変数として使用することを推奨します。
HTMLソース:
この場合、id=”thanks-message”のDOM要素で取得できるのは「お問い合わせいただきありがとうございます。」になります。
これを以下のように「DOM Readyのトリガーに設定した、DOMの変数[thanks]を設定して含まれている文字があった場合」に発火するといった条件として使用可能です。
ID=html内に<ID=>と設定している箇所です。
└IDを選択した場合は要素IDを設定します。
※ID=“これが要素ID”(上記を例にするとthanks-messageです。)
・属性名:画面上に表示されているテキストではなく、そのタグ内に設定されている非表示の値を取得したい場合に使用します。
└属性名は基本的に”value”を設定します。
→次のようにvalue値”成果ページ”がこのDOM要素で取得できるようになります。
・値の形式はケースに応じて設定してください。
・要素セレクタを設定する必要があります。
《 要素セレクタの確認方法 》
①Chromeからサイト上でデベロッパーツールを開く
②htmlソースの行を選択した際の左端の「・・・」をクリック
③コピーを選択、selectorをコピーします。
④コピーした内容を要素セレクタにペーストします
→このタグ内で囲まれている画面上に表示されているテキスト文字を取得することが可能です。
属性名はvalue値をID選択時と同じく取得可能です。
※スマホとPCでセレクタが異なるケースがありますのでご注意下さい。
設定例:
完了ページURLが以下の様になっており、「?order_id=」以降に注文番号が出力され、その値をCVタグ内注文番号に反映させたい場合
https://www.○○○.com/complete?order_id=1234
要素タイプ:クエリ
クエリキー:取得したい変数の名前。今回の例でいうと<order_id>
※キャプチャ左上の変数名は任意の名前で問題ありません。こちらで設定した名前をCVタグ内の変数名として設定するようにお願いします。