WordPressをAMP化手順メモ【GTM(Googleタグマネージャー)編】

WordpressをAMP化手順メモ【GTM(Googleタグマネージャー)編】

WordPressで既に作ってあるサイトを「AMP」プラグインでAMP化する際のメモです。

今までのAMP化関連の記事は別にハブページを作ってまとめています↓

AMP化するとGoogleアナリティクスもAMP用のプロパティで計測し、タグもAMP用のHTMLで挿入する事になりますが、Googleタグマネージャー(GTM)も同じように新たにAMP用のコンテナを作る必要があるようです。

以下はAMP用のGTMを導入し、Googleアナリティクスを導入するまでの手順になります↓

AMPページにGoogleタグマネージャーを導入するためには、AMP用のコンテナを新たに作って導入し直す必要があります。

Googleタグマネージャーのコンテナ作成に進みます↓

1 GTMでAMP用に新たにコンテナを作成する

GTMにはAMP用のコンテナコードがあるので以下のように「AMP」を選択して「作成」で進みます↓

2.GTMでAMP用に新たにコンテナを作成する

➁ GTMのAMP用の2つのコードをサイトのhead内とbody直下にコピペする

そしてGTMのAMP用のコードが2つ発行されるので、サイトの~の間と、直下にコピペします。

3.2つのAMP向けのGTMコードをhead内とbody直下にコピペ

ちなみにワードプレスのプラグイン「AMP」の場合だと、サイドメニューの「プラグイン」>「プラグインエディタ」の管理画面を開き、以下のように「編集するプラグインを選択: 」で「AMP」プラグインに合わせて「選択」ボタンで表示します。

4. プラグインエディタから「AMP」を選択して開く

その中から templates > html-start.php にAMP時のとの記述があるので、2つのコードを上記のようにコピペします↓

5 AMPプラグイン「templates」の「html-start.php」のhead終了前とbody直後に1つ目と2つ目のコードをコピペ

「1つ目のコードは</head>の上」「2つ目のコードが<body>の下」ですね。

これでGoogleタグマネージャーをAMPページに導入する事ができました。

➂ GTMでGoogleAnalyticsの設定をする

続いてGTM上でGoogleAnalyticsの設定をします。

GTM経由でGAを導入する図解

上記のように直接GoogleAnalyticsのタグをサイトに設定してもいいのですが、GTM経由で設定してもいいです。

GTM経由でGoogleアナリティクスを設定する場合は、GTMのワークスペースから「タグ」>「新規」で以下のように設定します↓

タグの名前: 「GoogleAnalytics(任意の名前)」
タグの種類: Googleアナリティクス:ユニバーサルアナリティクス
トラッキングID: UA-●●●●●●●●-●●
(AMPに新たに作ったGAのプロパティのトラッキングIDを入力)
トラッキングタイプ: ページビュー
その他の設定: そのままでOK
トリガー: All Pages

の設定で「保存」します。

ちなみにここでの「トラッキングID」は、以下記事でもあるように「AMP用のGoogleアナリティクスのプロパティを別で作成したもののトラッキングID」になります。

GoogleアナリティクスではAMPと非AMPでプロパティを分ける必要があるようです。

GTMで上記のGoogleAnalyticsのタグが作れたら右上の「公開」から任意の名前をつけて公開しましょう。

➃ GTM経由でGoogleAnalyticsのアクセスを測定できているか確認(テストトラフィック)

GTMのGoogleAnalyticsタグ公開後は、確認のため自分でAMPページにアクセスしてGoogleAnalytics上のリアルタイムでカウントされているかを確認しましょう。

6.最後にテストトラフィックを送り、GTM経由でGoogleAnalyticsがカウントできていることをリアルタイムで確認して終了

ちなみにこの方法でGTM経由でGoogleAnalyticsの設定をしている場合、「AMP」プラグインの「アナリティクス設定」での直のGoogleAnalytics設定は不要です。(二重にタグが入ってしまうのでどちらかを削除しましょう)