gtag.js の AMP 実装では、amp-analytics
フレームワークを活用して、AMP ウェブサイトの分析機能を提供します。同じ gtag.js 実装で、AMP ページから Google 広告、DoubleClick、Google アナリティクスにデータを送ることができます。
インストール
AMP ページで gtag.js を設定するには、まずは amp-analytics
コンポーネントがページの <head>
タグ内に含まれているようにします。
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
次に、グローバル サイトタグをインストールします。グローバル サイトタグ コードを JSON コンポーネントとして AMP ページの <body>
タグ内に追加します。<TARGET_ID>
を、関連する Google 広告コンバージョン ID、DoubleClick 広告主 ID、Google アナリティクス ID に置き換えます。
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
グローバル サイトタグに追加のサービスを設定するために、そのサービスからコード スニペット全体をインストールする必要はありません。ターゲット ID を config
オブジェクトに追加するだけです。この例では、既存の Google アナリティクス設定に Google 広告コンバージョン ID が追加されています。ご利用のサービスの値で <AW-CONVERSION_ID>
と <GA_MEASUREMENT_ID>
を置き換えてください。
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default" }, "<AW-CONVERSION_ID>": { "groups": "default" } } } } </script> </amp-analytics>
詳しくは、amp-analytics
のドキュメントをご覧ください。
イベント トリガー
ご利用のサービスに特定のデータを送信するには、クリックなどのイベントに基づいてトリガーを設定します。AMP の gtag.js トリガーは、他の amp-analytics
トリガー設定と同じ JSON パターンに従います。
この例では、Google アナリティクスにクリック イベントを送信する方法を示します。selector
値は CSS セレクタの一種で、どのエレメントをターゲットにするかを指定できます。on
値はイベントのタイプを指定します。この場合は click
イベントです。vars
セクションで event_name
にイベントのタイプを指定し、必要に応じて他のパラメータを追加します。
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
gtag.js の推奨イベント(リストあり)に加え、独自のカスタム イベントを指定することもできます。
ドメインをリンクする
ドメイン リンカーを利用すると、別々のドメイン上にある複数の関連サイトを 1 つにまとめて測定できます。リンクするドメインを指定するには "linker": { "domains": [...] }
を指定します。
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<TARGET_ID>", "config" : { "<TARGET_ID>": { "groups": "default", "linker": { "domains": ["example.com", "example2.com", "foo.example.com"] } } } } } </script> </amp-analytics>
デフォルトで、AMP キャッシュから正規ドメインにリンクする機能が有効になっています。ドメイン トラフィックをリンクする機能を無効にするには、config パラメータに "linker": "false"
を追加します。
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<TARGET_ID>", "config" : { "<TARGET_ID>": { "groups": "default", "linker": "false" } } } } </script> </amp-analytics>
サンプルコードの全文
このサンプルコードは、1 つの AMP ページを作成し、ボタンがクリックされたときに Google アナリティクスに「button-click
」イベントを送信する AMP ページの完全なデモを示しています。<GA_MEASUREMENT_ID>
を必ず有効なサービスの ID に置き換えてください。
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="self.html" />
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- Load AMP -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Load amp-analytics -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<!-- Configure analytics to use gtag -->
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config": {
"<GA_MEASUREMENT_ID>": {}
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Welcome to the mobile web</h1>
<div>
<button type="button" id="the-button">Example: Log in with Google</button>
</div>
</body>
</html>