この記事は、Google アナリティクスやGoogle 広告の新しい形式のタグであるグローバル サイトタグ(gtag.js)について、下記テーマで2回にわたって紹介しています。
今回は、
【第2回】グローバル サイトタグ(gtag.js)を用いたGoogle アナリティクスの必須設定
について説明します。
前回の記事はこちら
【第1回】グローバル サイトタグ(gtag.js)の基本
|
※※本記事は、2018年9月時点のものとなり、新たにリリースされたGoogleタグを対象とした内容ではございません。 ※本記事の内容は「ユニバーサルアナリティクス（UA）」におけるものになります。 GA4についてはこちらの記事をご覧ください。 【GA4】Google アナリティクス 4は使いづらい？導入のメリットは？プロが教えるホントの実力 |
目次
１．異なる2つ以上のドメインをまたいだ計測(クロスドメイン設定)
Google アナリティクスで計測するサイトのドメインが、「a.jp(例えば、本体サイト)」と「b.com(例えば、フォーム以降)」にまたがって存在する場合、「a.jp」から「b.com」または、その逆方向の遷移を計測するには、「_ga」というCookieをもう一方のドメインへ引き継ぐ設定にする必要があります。
（Ⅰ)グローバル サイトタグ(gtag.js)への記述の追加
（Ⅱ)Google アナリティクス管理画面のプロパティの設定にて、参照元除外ドメインの追加
こちらの2つを下記のように行います。
（Ⅰ)グローバル サイトタグ(gtag.js)への記述の追加
ベースのタグ(<head>直後に貼り付けます)
——————————
<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-12345-6″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘UA-12345-6’);
</script>
——————————
こちらのconfig行を次のとおりに書き換えます。
——————————
gtag(‘config’, ‘UA-12345-6‘, {
‘linker’: {
‘domains’: [‘a.jp’, ‘b.com‘]
}
});
——————————
＜実装するタグ＞
——————————
<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-12345-6″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘UA-12345-6‘, {
‘linker’: {
‘domains’: [‘a.jp’, ‘b.com’]
}
});
</script>
——————————
※プロパティIDであるUA-12345-6やドメインは適宜、変更します。
（Ⅱ)Google アナリティクス管理画面のプロパティの設定にて参照元除外ドメインの追加
次の手順で設定します。
Google アナリティクス管理画面の「管理(画面左下の歯車マーク)」から
① プロパティ列の「トラッキング情報」＞「参照元除外リスト」をクリック
② 「＋参照の除外を追加」をクリック
③ 「a.jp」と記入後、「作成」をクリック
④ 再度、「＋参照の除外を追加」をクリック
⑤ 「b.com」と記入後、「作成」をクリック
参照元除外リストに「a.jp」「b.com」があれば完了です。
追加するドメインは、「jp」や「com」などの末尾から「.」ごとに１つずつ左に読んで行き、固有の(ほかのサイトと混ざらない)ドメインになったところで追加します。
例えば、計測ドメインが、「https://www.medix-inc.co.jp」と「https://webbu.jp」の2ドメインだった場合、「https://www.medix-inc.co.jp」を「jp」→「co.jp」→「medix-inc.co.jp」と辿り、また、「https://webbu.jp」を「jp」→「webbu.jp」と辿ります。
この場合は、参照元除外リストに追加するのは「medix-inc.co.jp」と「webbu.jp」となります。「medix-inc.co.jp」や「webbu.jp」は各ドメインにおけるルートドメインと言われたりします。
なお、xyz.medix-inc.co.jpと言う、ルートドメインmedix-inc.co.jpのサブドメインの計測については、グローバル サイトタグ(gtag.js)にデフォルトで備わっています。※参照元除外リストに「medix-inc.co.jp」が追加されていることが必要です。
2.遷移してもURLが変わらないページの計測(バーチャルページビュー設定)
Google アナリティクスでは、URLパス(ページのURLのドメイン部分より下)がページのデータとして上がってきます。
＜例＞
https://medix-inc.co.jp/webbu/category/analytics → /category/analytics
https://medix-inc.co.jp/webbu/?s=Google → /?s=Google
フォームの入力、確認、完了ページのURLが次のように設定されている場合、3つのページデータが合算されるため、正しいページビューやページ別訪問数(またはコンバージョン数)が分からなくなってしまいます。
入力：https://medix-inc.co.jp/webbu/form/
確認：https://medix-inc.co.jp/webbu/form/
完了：https://medix-inc.co.jp/webbu/form/
URLが変わらない上記のページを区別して計測するには、該当ページのグローバル サイトタグ(gtag.js)の記述を修正する必要があります。
フォームの確認ページの場合
ベースのタグ(<head>直後に貼り付けてます。)
——————————
<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-12345-6″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘UA-12345-6’);
</script>
——————————
のconfig行を下記のとおりに書き換えます。
—————————— gtag(‘config’, ‘UA-12345-6‘, {
‘page_title’ : ‘フォーム_確認‘,
‘page_path’: ‘/form/confirm‘
});
——————————
＜実装するタグ＞
——————————
<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-12345-6″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘UA-12345-6‘, {
‘page_title’ : ‘フォーム_確認‘,
‘page_path’: ‘/form/confirm‘
});
</script>
——————————
※プロパティIDであるUA-12345-6やconfig内の右辺の値は適宜、変更します。
上記の「page_title」は「ページタイトル(<title>タグの値)」を書き換える際に、「page_path」は「ページ」を書き換える際に記載します。
上記の記述により、フォームの確認ページは「/form/」→「/form/confirm/」として計測されます。
フォームの完了ページの場合
ベースのタグ(<head>直後に貼り付けます)
——————————
<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-12345-6″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘UA-12345-6’);
</script>
——————————
のconfig行を、次のとおりに書き換えます。
——————————
gtag(‘config’, ‘UA-12345-6‘, {
‘page_title’ : ‘フォーム_完了‘,
‘page_path’: ‘/form/complete‘
});
——————————
＜実装するタグ＞
——————————
<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-12345-6″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘UA-12345-6‘, {
‘page_title’ : ‘フォーム_完了‘,
‘page_path’: ‘/form/complete‘
});
</script>
——————————
※プロパティIDであるUA-12345-6やconfig内の右辺の値は適宜、変更します。
上記の記述により、フォームの完了ページは「/form/」→「/form/complete/」として計測されます。
3.商品などの数量や売上の計測(拡張EC設定※完了ページのみ)
Google アナリティクスでは、購入商品などの情報は自動的に取り込まれません。「どの商品」が「いくら売れたのか」をGoogle アナリティクス上で計測するには、購入完了ページで動的に値を出力する必要があります。
Ⅰ)グローバル サイトタグ(gtag.js)への記述の追加
Ⅱ)Google アナリティクス管理画面のビューの設定にてeコマースの設定
の2つを下記のように行います。
（Ⅰ)グローバル サイトタグ(gtag.js)への記述の追加
拡張EC(eコマース)は、購入完了ページやチェックアウトページ、カートページ、商品詳細ページ、商品一覧ページなど、各個所での商品情報を取得可能です。
まずは、購入完了ページで取得可能な値とそのタグについて説明します。
取得可能な商品情報は、主に下の表のとおりです。
|
項目名 |
グローバル サイトタグ(gtag.js)上の変数 |
必須かどうか |
|
トランザクションID(購入ID) |
transaction_id |
必須 |
|
アフィリエーション(店舗名等) |
affiliation |
必須でない |
|
収益 |
value |
推奨 |
|
税額 |
tax |
必須でない |
|
送料 |
shipping |
必須でない |
|
商品のSKU(商品ID) |
id |
必須(idかnameが必須) |
|
商品(商品名) |
name |
必須(idかnameが必須) |
|
商品ブランド |
brand |
推奨 |
|
商品カテゴリ |
category |
推奨 |
|
商品バリエーション(色、サイズなど) |
variant |
推奨 |
|
数量 |
quantity |
推奨 |
|
単価 |
price |
推奨 |
タグの記述は、
＜3,000円の商品Aを2点、4,000円の商品Bを1点、合計で10,000円の購入の場合＞
ベースのタグ(<head>直後に貼り付けます)
——————————
<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-12345-6″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘UA-12345-6’);
</script>
——————————
のconfig行の下に、次のとおりに追記します。
——————————
gtag(‘event’, ‘purchase’, {
“transaction_id”: “201808222300001234”,
“affiliation”: “test store”,
“value”: “10000”,
“tax”: “800”,
“shipping”: “0”,
“items”: [
{
“id”: “P12345”,
“name”: “商品A”,
“brand”: “ブランドK”,
“category”: “カテゴリX”,
“variant”: “黒”,
“quantity”: “2”,
“price”: “3000”
},
{
“id”: “P67890”,
“name”: “商品B”,
“brand”: “ブランドL”,
“category”: “カテゴリY”,
“variant”: “白”,
“quantity”: “1”,
“price”: “4000”
}
]
});
——————————
＜実装するタグ＞
——————————
<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-12345-6″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘UA-12345-6’);
gtag(‘event’, ‘purchase’, {
“transaction_id”: “201808222300001234”,
“affiliation”: “test store”,
“value”: “10000”,
“tax”: “800”,
“shipping”: “0”,
“items”: [
{
“id”: “P12345”,
“name”: “商品A”,
“brand”: “ブランドK”,
“category”: “カテゴリX”,
“variant”: “黒”,
“quantity”: “2”,
“price”: “3000”
},
{
“id”: “P67890”,
“name”: “商品B”,
“brand”: “ブランドL”,
“category”: “カテゴリY”,
“variant”: “白”,
“quantity”: “1”,
“price”: “4000”
}
]
});
</script>
——————————
※上記は、3,000円の商品Aを2点、4,000円の商品Bを1点、合計で10,000円の購入を行った際のタグとなります。税抜にしていますが、税込でも構いません。
商品の種類数が増減する場合は、「items」内の{}内を「,」でつなげる形で動的に値を入れてください。
（Ⅱ)Google アナリティクス管理画面のビューの設定にてeコマースの設定
次の手順で設定を行います。
Google アナリティクス管理画面の「管理(画面左下の歯車マーク)」から
① ビュー列の「eコマースの設定」をクリック
② eコマースの有効化及び拡張eコマースのレポートの有効化を「オン」にし、「保存」をクリック(Checkout Labelingについては、設定せずとも問題ありません)
③ 同じくビュー列の「ビュー設定」をクリック
④ 通貨の欄で適するものを選択し、「保存」をクリック
以上でグローバル サイトタグ(gtag.js) を用いたGoogle アナリティクスの必須設定が完了となります。
