WordpressでGoogleTagManagerを使う

GoogleTagManagerというサービスを使うと、サイト内に導入する各種タグ(GoogleAnalyticsなどのアクセス解析タグ、アフィリエイトタグ、広告タグなど)を専用の管理画面で一括管理することが出来る。

これまでは、個別にページ内のHTMLに各種タグを埋め込む必要があったと思うが、GoogleTagMnagerを使うことで、HTMLを編集することなくタグの追加・編集等が行えるようになる。

Wordpressでもプラグインを利用して、このGoogleTagManagerを導入可能なので紹介する。

GoogleTagManagerアカウント作成

-----------------------------------------------------

まずGoogleTagManagerのアカウントを作成する。

1.「https://www.google.com/tagmanager/」にアクセスし「今すぐ登録」をクリック

スクリーンショット 2015-04-06 19.10.33

2.アカウント名に任意の名称を入力

スクリーンショット 2015-04-06 19.11.21 3.「コンテナ」を作成 「コンテナ」毎にタグが発行される。タグマネージャで管理する範囲。1ドメイン毎などで設定されることが多い。

WordpressのサイトへのGoogleAnalytics導入なので、以下のように項目を選択・記載。

コンテナ名:任意 コンテナの使用場所:ウェブページ ドメインオプション:使用するWordpressで構築されたサイトを入力 タイムゾーン日本

スクリーンショット 2015-04-06 19.12.19 4.利用規約に同意

スクリーンショット 2015-04-06 19.12.35

5.タグが発行され、「GoogleAnalytics」を選択し設定に進む サイトに貼り付けるタグが発行される。

ここで、GTM IDが発行される(GTM-xxxxx)。のちほどWordpressで利用するためメモしておく。

スクリーンショット 2015-04-06 19.12.46

6.「GoogleAnalytics」タグの設定 GoogleTagManagerのタグをサイトに入れた際に、「GoogleAnalytics」タグが出力されることで、「GoogleAnalycs」タグが実行される。 タグ出力のタイミング等の設定を行う。

タグ名:任意 タグの種類:ユニバーサルアナリィクス ラッキングID:GoogleAnalytics(ユニバーサルアナリティクス)で発行されたプロパティID ラッキングタイプ:ページビュー

スクリーンショット 2015-04-06 19.14.44

「配信のルール」を押下

6.配信のルールを設定 「GoogleAnalytics」のタグは全ページで出力する必要があるため、以下のように設定。

ルールの追加:「既存のルールから選択」→「すべてのページ」で「保存」押下

スクリーンショット 2015-04-06 19.57.01

 

WordpressでGoogleTagManagerの設定

-----------------------------------------------------

1.プラグインの追加 GoogleTagManagerを設定するためのプラグインを検索し、追加。

スクリーンショット 2015-04-06 19.19.46

 

 

 

 

 

2.「Google Tag Manager」と検索し、「Google Tag Mnager for Wordpress」というプラグインを選択しインストール

スクリーンショット 2015-04-06 19.23.52 2

3.インストールが終わったら有効化 スクリーンショット 2015-04-06 19.24.16

4.プラグイン設定を行う 4−1.「enter your GTM ID」をクリック

スクリーンショット 2015-04-06 19.24.49

4−2.詳細設定

Google Tag Manager ID:上記コンテナ作成時に発行されたID Container code placeent:Custom(needs tweak in your template)

スクリーンショット 2015-04-06 19.25.56

Googleが推奨する<body>直下へのタグ挿入をするよう「Custom」を選択

5.テンプレートにタグをうめこむ

Wordpressのテンプレートの<body>直下に以下コードを記入。

<?php if ( function_exists( 'gtm4wp_the_gtm_tag' ) ) { gtm4wp_the_gtm_tag(); } ?>

テンプレート:外観>テーマの編集>ヘッダー(header.php

6.既存のGoogleAnalyticsタグをサイトから削除

GoogleAnayticsタグをすでに設定している場合は、今後はGoogleTagManagerで一元管理するたタグを削除。

GoogleTagManagerの公開

-----------------------------------------------------

サイトへのタグ設定まで終わったので、GoogleTagManagerを公開してGoogleAnalyticsでの計測を有効にする。

1.バージョンの作成

公開するためにバージョンを作成する。 バージョンを設定することで、設定途中のものが公開などされないような仕組みになっている。

スクリーンショット 2015-04-06 19.35.40

2.プレビューにてタグが正しく設定されているかを確認

デバッグ」押下

スクリーンショット 2015-04-06 19.36.09

該当するドメインを押下すると、該当サイトがデバッグモードで開く

 

スクリーンショット 2015-04-06 19.36.20

3.ブラウザの下部に、デバッグモード画面が表示され、正しくGoogleAnalyticsタグが設定されていることを確認。

スクリーンショット 2015-04-12 16.43.29

4.公開

スクリーンショット 2015-04-06 19.12.46 スクリーンショット 2015-04-12 16.48.46

 

GoogleAnalyticsのリアルタイムレポートで、ページビューが計測されていることを確認して完了。 忘れないようにデバッグモードを終了。