グローバル サイトタグ(gtag.js)について
【第2回】グローバル サイトタグ(gtag.js)を用いたGoogle アナリティクスの必須設定

  • このエントリーをはてなブックマークに追加

この記事は、Google アナリティクスやAdWords(Google 広告)の新しい形式のタグであるグローバル サイトタグ(gtag.js)について、下記テーマで3回にわたって紹介しています。

【第1回】グローバル サイトタグ(gtag.js)の基本
【第2回】グローバル サイトタグ(gtag.js)を用いたGoogle アナリティクスの必須設定
【第3回】グローバル サイトタグ(gtag.js)を用いたGoogle アナリティクス・Google オプティマイズの追加設定

今回は、
【第2回】グローバル サイトタグ(gtag.js)を用いたGoogle アナリティクスの必須設定 
について説明します。

前回の記事はこちら
【第1回】グローバル サイトタグ(gtag.js)の基本
https://webbu.jp/gtag-1-4470

<目次>

1.異なる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」などの末尾から「.」ごとに1つずつ左に読んで行き、固有の(ほかのサイトと混ざらない)ドメインになったところで追加します。
例えば、計測ドメインが、「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://webbu.jp/category/analytics → /category/analytics
https://webbu.jp/?s=Google → /?s=Google

フォームの入力、確認、完了ページのURLが次のように設定されている場合、3つのページデータが合算されるため、正しいページビューやページ別訪問数(またはコンバージョン数)が分からなくなってしまいます。

入力:https://webbu.jp/form/
確認:https://webbu.jp/form/
完了:https://webbu.jp/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-6config内の右辺の値は適宜、変更します。

上記の「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-6config内の右辺の値は適宜、変更します。
上記の記述により、フォームの完了ページは「/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 アナリティクスの必須設定が完了となります。

次回は、グローバル サイトタグ(gtag.js)を用いたGoogle アナリティクス・Google オプティマイズの追加設定(Google アナリティクスでは、イベントトラッキングとカスタムディメンション)の実装についてお伝えします。