CocoonにGoogleタグマネージャーのトラッキングIDを設定する

スポンサーリンク
スポンサーリンク

Cocoon Googleタグマネージャー設定

いわしブログで利用中のブログテーマ「Cocoon」に、Googleタグマネージャーのアクセス解析用トラッキングIDを設定してみました。

CocoonにはGoogleアナリティクスのアクセス解析用トラッキングIDを設定する機能があり、GoogleアナリティクスのトラッキングIDをそのまま利用する方法と、Googleタグマネージャーで作成したトラッキングIDを使う方法があります。

今回はGoogleタグマネージャーでトラッキングIDを作成して、Cocoonに設定する方法をご紹介します。CocoonのAMP機能を有効にしている場合は、こちらの方法がオススメです。

GoogleアナリティクスでAMPページのアクセス解析を行う場合は、別途AMP用のコードが必要になりますが、Googleタグマネージャーを使えば、簡単にAMPページ用の設定ができますよ。

スポンサーリンク

Googleタグマネージャーの設定

では、GoogleタグマネージャーでトラッキングIDを作成してみましょう。必要なものはGoogleアナリティクスのトラッキングIDです。

以前のIDはそのまま使えますが、新規でアクセス解析を始める場合は、Googleアナリティクスの管理画面からブログのプロパティ設定を済ませておいてください。

まずは以下のページを開いて、青いボタン「Googleマーケティングプラットフォームにログインする」をクリックします。ブログに紐付いたGoogleアカウントでログインしてください。

Google Marketing Platform - Unified Advertising and Analytics
Introducing Google Marketing Platform, a unified marketing and analytics platform for smarter marketing measurement and better results.

Googleマーケティングプラットフォーム

ログインしたら「タグマネージャー」に進みます。

Googleマーケティングプラットフォーム

「アカウントを作成」をクリックします。

タグマネージャー アカウント作成

好きなアカウント名を入力して、国は「日本」を選択します。データ共有にチェックを入れると、ベンチマークサービスが使えるのでお好みでどうぞ。

タグマネージャー アカウントの設定

続いてコンテナの設定です。コンテナ名にはブログ名を入力、ターゲットプラットフォームは「ウェブ」を選択して「作成」をクリックします。

タグマネージャー コンテナの設定

タグマネージャーの利用規約が表示されるので、チェックを入れて「はい」をクリックします。

タグマネージャー利用規約

Googleタグマネージャーのコードが表示されます。通常はコードの貼り付けが必要ですが、CocoonではトラッキングIDのみ利用します。

タグマネージャー トラッキングコード

コード内にあるトラッキングID「GTM-●●●●●●●」の部分だけコピーしてください。

タグマネージャー トラッキングIDコピー

Cocoon設定の「アクセス解析・認証」から、Googleタグマネージャ設定内の「タグマネージャID」にコピーしたトラッキングIDを貼り付けて「保存」します。

Cocoon トラッキングID入力

これでCocoonにタグマネージャIDを設定できました。

Googleアナリティクス タグの設定

続いてGoogleアナリティクスのタグを設定します。タグマネージャーのワークスペースにある「新しいタグを追加」をクリックします。

タグマネージャー 新しいタグを追加

「タグの設定」に進みます。

タグマネージャー タグの設定

「タグタイプを選択」で「Google アナリティクス – ユニバーサル アナリティクス」を選択します。

タグの設定 Googleアナリティクス

トラッキングタイプは「ページビュー」、Googleアナリティクス設定はそのまま、「このタグでオーバーライド設定を有効にする」にチェックを入れるとトラッキングIDの入力欄が表示されるので、Googleアナリティクスで設定済みのトラッキングIDを入力します。

タグの設定 Googleアナリティクス

次にトリガーを設定します。

タグマネージャー トリガーの設定

トリガーの選択で「All Pages」をクリックします。

タグマネージャー トリガーの選択

タグとトリガーの設定ができたら、右上の「保存」をクリックします。

タグマネージャー タグ設定

タグ名を入力して「保存」してください。

タグマネージャー タグ名入力

ワークスペースの変更に新しいタグがあることを確認したら「公開」してください。

タグマネージャー タグの公開

最後にバージョン情報を作成します。適当なバージョン名を入れて「公開」すればOKです。

タグマネージャー 変更の送信

これでGoogleアナリティクスのタグが有効になりました。

タグマネージャー バージョン情報

AMPページ用タグの設定

CocoonでAMP機能を有効化している場合は、AMP用のタグを別途設定する必要があります。

AMP用のタグがないと、AMPページのアクセスはカウントされないので注意してください。AMP機能を使っていない場合は、以下の設定は必要ありません。

新たにAMP用のコンテナを作成するため、左上からホームに戻ります。

タグマネージャー ホームに戻る

アカウント右上のメニューを開いて「コンテナを作成」を選びます。

タグマネージャー コンテナ作成

コンテナ名を入力して、ターゲットプラットフォームは「AMP」を選んで「作成」をクリックします。

タグマネージャー コンテナ作成

AMP用のコードが表示されるので、トラッキングID「GTM-●●●●●●●」の部分だけコピーしてください。

タグマネージャー AMP用トラッキングID

トラッキングIDの前後にある「=」と「&」は不要です。AMP用のコードは区切りがわかりにくいのでご注意を。

タグマネージャー AMP用トラッキングID

Cocoon設定の「アクセス解析・認証」から、Googleタグマネージャ設定内の「AMP用 タグマネージャID」にコピーしたトラッキングIDを貼り付けて「保存」します。

Cocoon AMP用トラッキングID入力

続いて「新しいタグを追加」をクリックします。

新しいAMP用タグを追加

「タグの設定」に進みます。

タグマネージャー AMP用タグの設定

「タグタイプを選択」で「Google アナリティクス – ユニバーサルアナリティクス」を選択します。

AMP用タグの設定 Googleアナリティクス

GoogleアナリティクスのトラッキングIDを入力します。GoogleではAMPページ用プロパティの別途作成を推奨していますが、同じプロパティのトラッキングIDを使っても問題ありません。

タグの設定 トラッキングID入力

次にトリガーを設定します。

タグマネージャー AMP用トリガーの設定

トリガーの選択から「All Pages」をクリックします。

タグマネージャー トリガーの選択

タグとトリガーの設定ができたら、右上の「保存」をクリックします。

タグマネージャー AMP用タグ設定

タグ名を入力して「保存」してください。

タグマネージャー タグ名入力

あとは右上から「公開」して、同じようにバージョン情報を作成してください。

タグマネージャー AMP用タグの公開

これでAMP用タグの設定は完了です。ただし、AMPタグは反映されるまで時間がかかります。アクセスがカウントされない場合は、しばらく時間を置いてから改めてチェックしてください。

トラッキングIDの重複に注意

タグマネージャーの設定が終わったら、Googleアナリティクスのリアルタイム解析でタグの動作をチェックしましょう。ちゃんとカウントされていればOKです。

あと、タグマネージャーを設定したら、他のトラッキングIDは不要です。CocoonのGoogle Analytics設定やアナリティクス用プラグインにトラッキングIDが残っていないか確認しましょう。

リアルタイム解析の「秒単位」を見て、アクセスカウントが1単位かどうかをチェックしてください。2単位の場合はアクセスが二重でカウントされています。

リアルタイム解析

あと、いつまでたってもカウントが始まらない場合は、新しいタグを作り直して再設定してください。以前にAMPページでカウントされないトラブルがありましたが、再設定したら直りました。

Cocoonのアクセス解析はタグマネージャーで

いわしブログで利用中の「Cocoon」は、無料とは思えないほどの多機能なブログテーマです。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

CocoonならAMPの対応もチェック一つで完了するし、別途タグが必要になるAMPページのアクセス解析も、ちゃんとGoogleタグマネージャーを使う方法が用意されています。

Googleアナリティクスのコード設置はいろいろな方法がありますが、Cocoonのアクセス解析はGoogleタグマネージャーの利用をオススメします。

タイトルとURLをコピーしました