AMP for WordPress にGoogle Tag Managerを設置する方法

AMPページのアクセス解析をGoogle Tag Managerを使用して行う場合、Google Tag Managerの設定コードを、AMPページの<head>タグ内の最後と<body>タグ内の最初に設置します。設置方法は、サイトのAMP化の方法などによって異なります。

本記事では、AutomatticのプラグインAMP for WordPressを使って、サイトのAMP化を行っている場合のGoogle Tag Managerのコード設置方法を紹介します。

AMP for WordPress でAMP化したサイトにGoogle Tag Managerを設置する方法

プラグインAMP for WordPressでのGoogle Tag Managerの設置方法は、テンプレートファイルを編集して行うのが比較的簡単で、設定しやすい方法です。子テーマを作成して、テンプレートファイルを編集する方が保守性に優れますが、当該プラグインはそれほど頻繁に更新されないので、子テーマを使わないでテンプレートファイルを直接編集するのでも手間はそれほどかからないと思います。

もう一つの方法は、AMP for WordPressで定義している関数を使用して、Google Tag Managerのコードを挿入する方法です。設定用のプラグインを作成すると保守性も高く、管理もしやすいです。ただし、ある程度以上の知識経験が必要となります。

ここではテンプレートファイルを編集して設置する方法を紹介します。

AMPページ用のGoogle Tag Managerコードの取得

AMPにGoogle Tag Managerを設定するためには、AMPページ用のGoogle Tag ManagerにAMP用のコンテナを作成して、コードを取得する必要があります。コードの取得方法については、以下の記事をご参照下さい。

AMP用Google Tag Managerの設定コードの取得方法

Google Tag Manager 設定用コードについて

Google Tag Managerの（タグ格納用）コンテナコードは<head>タグ内の最後に設置するコードと<body>タグの直下（先頭）に設置する2種類のコードがあります。

それぞれのコードをコピーして、所定の場所に貼り付けます。

備考：
Google Tag Managerのコードは、通常ページの場合は<head>タグ内のできるだけ上の方に設置することが推奨されています。一方、AMP用のGTMのコード（アナリティクスと共通です）は、<head>タグ内の最後に設置するように指定されています。

プラグイン AMP for WordPress にGoogle Tag Managerのコード設置方法

WordPress 管理画面のメニューから「プラグイン」をクリックし、「プラグインの編集」を選択します。

<head>タグ内のコードの設置

① プラグイン編集ページの右上に表示される「編集するプラグインを選択」の右の欄をクリックして表示されるドロップダウンリストのなかから、「AMP」を選び、［選択］ボタンを押します。

② 右側に縦に並んで表示されるプラグインファイルのリストの中から、”templates”をクリックして、”html-start.php”を選択します。

③ “html-start.php”のソースコードが表示されます。</head>タグの上に、Google Tag Managerの<head>タグ内に設置するコードを貼り付けます。

内容を確認後、ページ下部の［ファイルを更新］ボタンを押して編集したテンプレートファイルを保存します。

<body>タグ直下のコードの設置

続いて、プラグインファイルのリストから”single.php”をクリックします。表示されるソースコードの中の、html-startを呼び出すコードの下にGoogleタグマネージャーのコードを貼り付けます。

以下、Googleタグマネージャーのコードを貼り付けた部分です。

$this->load_parts( array( ‘html-start’ ) );
?>
<!– Google Tag Manager –>
<amp-analytics config=”https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXX&gtm.url=SOURCE_URL” data-credentials=”include”></amp-analytics>

注意事項：
上のコードはサンプルです。Google Tag ManagerのID(GTM-XXXXXXX)は、アカウントのコンテナによって固有となります。設置する場合は、Google Tag Managerのアカウントページで作成したコードを貼り付けるようにして下さい。

プラグイン編集ページの下の［ファイルを更新］ボタンを押して、設定を保存します。

以上でGoogle Tag Managerのコードの設置作業は完了です。