GoogleTagManagerでのA8タグ設定に関して

概要

GoogleTagManager(GTM)を用いたA8タグの設定方法をご案内致します。

※サイト内にGTMタグの設置が完了している事を前提と致します。

目次

事前に用意するもの

はじめに

アフィリエイト広告は基本的に成果データの承認という作業が必要となります。

成果データの承認の際には、申込み情報売上情報との紐付けが非常に重要となります。

申込み番号や、注文番号など、必ずどの情報によって成果の承認を行うかを事前にイメージし、A8タグの設定を行って頂けます様、宜しくお願い致します。

GTMでの設定の基本

  1. 利用したい変数をGTM上で定義する (ユーザー定義変数を新規作成)

  2. GTM管理画面上でタグを設定する

  3. タグを出力する条件(トリガー)を設定する

  4. 上記のユーザー定義変数をGTMへ渡す処理を実装する (dataLayer)

弊社以外の様々な計測用のタグにおいても、基本的な設定はこの4ステップとなります。

利用したい変数(例えば注文番号受付番号など)を渡す部分が難しく感じるかもしれませんが、上記の流れを先ずは把握することが重要です。

GoogleTagManager自体の利用方法については、GTM管理画面内をご参照下さい。

設定するA8タグについて

全ページに以下のjsファイルを読み込ませます (<head>内)

<script src="//statics.a8.net/a8sales/a8sales.js"></script>

CVページに以下のタグを挿入します (<body>内)

<span id="a8sales"></span>
<script>
a8sales({
  "pid": "広告ID",
  "order_number": "御社側での注文情報を識別するID",
  "currency": "通貨コード",
  "items": [
    {
      "code": "商品を識別するコード",
      "price": 価格,
      "quantity": 個数,
    },
  ],
  "total_price": 合計金額,
});
</script>

各値の詳細については「A8.netトラッキング設定について」という資料をご参照下さい。

実際の設定手順のご案内

  1. A8タグに利用する変数の設定 : GTM管理画面
  2. A8タグ(<head>に設置するタグとトリガー)の設定 : GTM管理画面
  3. A8タグ(CVページに設置するタグとトリガー)の設定 : GTM管理画面
  4. dataLayerへ値を渡すjavascriptを設置 : Webページ

1. A8タグに利用する変数の設定 : GTM管理画面

成果計測に用いる各種の値を登録していきます。

値として固定値を用いる項目については変数の登録は不要です。

変数の登録

設定画面:GTM管理画面 > コンテナ > workspace > 変数

設定する値の例

変数の種類:データレイヤーの変数として設定

2. A8タグ(<head>に設置するタグとトリガー)の設定 : GTM管理画面

成果計測に必要なjsファイルを呼び出す設定を行います。

タグの登録

設定画面:GTM管理画面 > コンテナ > workspace > タグ

タグのタイプ:カスタムHTMLとして新規登録


<script src="//statics.a8.net/a8sales/a8sales.js"></script>

上記のコードをHTML入力欄に登録します。

document.write をサポートするのチェックボックスについては、チェック有無に関わらず正常に動作致します。

トリガーの設定

全てのページビューを指定し、全ページで上記のjsが読み込まれる様に設定します。

3. A8タグ(CVページに設置するタグとトリガー)の設定 : GTM管理画面

タグの登録

設定画面:GTM管理画面 > コンテナ > workspace > タグ

タグのタイプ:カスタムHTMLとして新規登録

<span id="a8sales"></span>
<script>
a8sales({
 "pid": "s00000000062001",
 "order_number": "{{salesOrder}}",
 "currency": "JPY",
 "items": [
 {
 "code": "{{itemCode}}",
 "price": {{price}},
 "quantity": {{quantity}}
 },
 ],
 "total_price": {{totalPrice}},
});
</script>

上記のコードをHTML入力欄に登録します。(設定例)

変数を利用する場合は、各値に対して{{登録した変数名}} という形式で設定する事で利用可能となります。

※設定はデータレイヤーの変数名ではなく変数の名前にてご指定下さい。

固定値の場合はJPYの様に、直接指定することが可能です。

document.write をサポートするのチェックボックスについては、チェック有無に関わらず正常に動作致します。

4. dataLayer変数へ値を渡すjavascriptを設置 : Webページ

注文情報など、CVタグの出力時に利用する変数の中身をGTMへ送信する処理をWebページに追加します。

GTMへ送信する設定例

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'salesOrder':'order001',
    'itemCode': 'item0002',
    'price': 1230,
    'quantity': 2,
    'totalPrice': 2460,
});
</script>

上記の設定例の様に、先に登録したdataLayer変数の名前に値をセットします。

dataLayer.push({
'dataLayer変数名':'値',
'dataLayer変数名':'値',
});

また、それぞれのデータ型については適切にご設定下さい。

設置箇所

CVページに設置される場合は、必ずGoogleTagManagerの呼び出しより前 に記述を追加して下さい。

CVページへの設置イメージ

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="ご注文ありがとうございました" />
<meta name="Keywords" content="A8" />
<title>完了ページ設定デモ</title>


<script>
//ここでdataLayerへ値を送信
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'salesOrder':'order001',
    'itemCode': 'item0002',
    'price': 1230, //データ型に注意
    'quantity': 2, //データ型に注意
    'totalPrice': 2460,
});
</script>



<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-*********');</script>
<!-- End Google Tag Manager -->

</head>

<body>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-*********"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->



<p>ご購入頂きまして、まことにありがとうございました</p>


</body>
</html>

サンプル

1回の注文にて複数商品が購入された場合、itemsの中身を複数設定する場合のサンプル

※itemsの中身をdataLayer変数へ配列として値を渡す設定例となります

対象:物販サイトでトラッキングタグの items 内に商品毎の値を反映希望の広告主様

A8タグに利用する変数の設定 : GTM管理画面

設定する値の例

変数の種類:データレイヤーの変数として設定

A8タグ(CVページに設置するタグとトリガー)の設定 : GTM管理画面

<span id="a8sales"></span>
  <script>
  a8sales({
   "pid": "s00000000062001",
   "order_number": "{{salesOrder}}",
   "currency": "JPY",
   "items":  {{product}},
   "total_price": {{totalPrice}},
  });
  </script>

dataLayer変数へ値を渡すjavascriptを設置 : Webページ

GTMへ送信する設定例

<script>
※ 商品列挙の配列を生成するスクリプトを設定 ※
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'salesOrder':'order001',
    'product': [{'code':'item0001','price':100,'quantity':2},{'code':'item0002','price':100,'quantity':1},],
    'totalPrice': 2460,
});
</script>

product内に注文商品毎に{'code':'値','price':値,'quantity':値}を列挙を行い、配列としてセットします。

dataLayer変数へ値を渡す前に配列を生成する処理を設定下さい。

その他

Copyright 2019 F@N Communications, Inc. All Rights Reserved