プラグイン AMP for WordPressを使用して、AMP化したサイトにGoogle アナリティクスのトラッキングコードを設置する方法を紹介します。
AMP ページに設置するGoogle アナリティクスのコードについて
AMPページのトラッキングを行うGoogle アナリティクスのコードは、通常ページに設置するGoogleアナリティクスのコードではなく、AMP専用のコードが必要となります。コードは二組あります。1つは、<head>タグ内にAMP ページにアナリティクスの機能を有効にするスクリプトコードです。もう一つは、bodyタグ内に設置する解析要素を指定するトラッキングコードになります。
AMP for WordPressでAMP化した場合のアナリティクスの設置方法
Google アナリティクスコードの設置は、AMP for WordPressの関数を使用して設置することもできるのですが、その場合、解析要素をトラッキングするコードの設置が<body>タグ内の最後になります。<body>タグの最後にトラッキングコードが設置されている場合、ユーザーがページのロードが完了する前に離脱した場合のトラッキングができない難点があります。
Googleは、アナリティクスのトラッキングコードは、<body>タグの直下（ページのメインコンテンツの前）に設置することを推奨しています。プラグインのテンプレートファイルを編集して行うと、コードを<body>タグ直下に設置することができます。
本記事では、AMP for WordPress プラグインのAMP テンプレートファイルを編集して、Google アナリティクスのトラッキングコードを設置する方法を紹介します。
Google アナリティクス トラッキングコードの設置手順
AMP テンプレートファイルの移動
AMP for WordPressは、テンプレートファイルのカスタマイズ編集を行った場合の保守、管理を行うことをし易い設計がされています。テンプレートファイル編集作業を行う前に、以下の記事で紹介する方法でテンプレートファイルをWordPressのテーマファイルのディレクトリーに移動しておくと、プラグインをアップデートしてもテンプレートファイルの編集内容を保持することができます。
編集したAMP for WordPress のテンプレートファイルの保管方法
当該作業は、テンプレートファイルを編集後でも構いませんが、ここでは編集作業の前に行なっています。
Google アナリティクス スクリプトコードの設置
① WordPress ダッシュボードのメニュー「外観」から「テーマの編集」を選択し、右側に表示されるテーマファイルのリストから”amp”をクリックして、テンプレートファイルのリストを表示させます。
② 右側に縦に並んで表示されるテーマファイルのリストの中から、ディレクトリー”amp”をクリックして、”html-start.php”を選択します。
③ ”html-start.php”のソースコードが表示されます。</head>タグの上に、以下のGoogle アナリティクス スクリプト コードを貼り付けます。
src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
続いて、ページのトラッキング要素のコードを作成して、③で編集したファイルに追加する作業を行います。
④ Google アナリティクスのアカウントにログインして、管理ページからサイトのAMPページをトラッキングする「プロパティ設定」のトラッキングIDをコピーします。アナリティクスのトラッキングID は、”UA-12345678-1”の様な形式です。
⑤ 以下のコードのUA-XXXXXXXX-Yの部分に④でコピーしたトラッキングIDに差し替えます。以下のコードは、ページトラッキングを行う設定コードです。
<script type=”application/json”>
{
“vars”: {
“account”: “UA-XXXXXXXX-Y”
},
“triggers”: {
“trackPageview”: {
“on”: “visible”,
“request”: “pageview”
}
}
}
</script>
</amp-analytics>
⑥ ⑤でトラッキングIDを加えたコードをコピーして、③で編集していた”html-start.php”のソースコードの<body>の下にコードを貼り付けます。
⑦ 設定内容を確認の上、「ファイルを更新」ボタンを押して、テンプレートファイルを保存します。
以上で、AMPページへのGoogle アナリティクスの設定は完了です。
コメントを残す（承認後表示されます）