意味ないと思っていた GTMはイベント計測できるスゴイ子だったので設定してみる

Googleタグマネージャー(GTM)使ってますか?
僕は、アナリティクスやFacebookなどのタグをいくつもWebページに使いたいとき、Web側を修正しなくてもマネージャ側を変更するだけでまとめて操作できるだけだと思っていました。
つまり、アナリティクスだけしか使っていないから、わざわざGTMにする必要ないという判断です。

しかし、もっと有効な機能があったようです。
それは、Webページ上で発生したクリックや画面遷移などのイベントを細かく計測できる機能です。

今までは、aタグのonclick属性にgtagを呼び出すコードを記述していましたが、プログラミングに慣れていてもミスが多発する行為でした。
実際に数日たってから、動作していないということが発覚するケースが多いです。

ですがGTMを使用すれば、わざわざWebページを書き換えなくても、いつでも自由にイベントを追加したり削除したりできます。
ほんとに、スゴイ子なんです。

もっと早く使っていればよかったと、後悔するほどなんです。

ということで、今回はGTMの使い方をお伝えします。

この記事を書いた後にわかったこと:

GA4はGTMを使用しなくても、特定のリンククリックを検知できました。
しかし、反映まで時間がかかることと、イベントの取りこぼしの可能性があることからGTMの使用がおススメです。
詳しくはこちらで紹介しています。

GA4と旧アナリティクスタグでのイベント送信方法の差異について調べてみた

GTMアカウントとコンテナを作成する

(1) 下のリンクをクリックしてGTMを開きます

https://tagmanager.google.com/

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

アカウントを作成

(3) 必要な情報を入力して「作成」ボタンを押します

①アカウント名は自分でわかりやすい名前を入力します。
②国をリストから選択します。日本はリストの下の方にあります。
③コンテナ名も自分でわかりやすい名前を入力します。
④ターゲットプラットフォームはWebサイトの場合「ウェブ」を選択します。

アカウントとコンテナ情報を入力

(4) Google タグ マネージャー利用規約が表示されるので、一読して「はい」を押します

2021年4月現在、規約が日本語訳されていません。
グーグル翻訳さん(https://translate.google.co.jp/)に全文をコピペして読んでおきましょう。

規約下の「GDPR で必須となるデータ処理規約にも同意します」は、欧州経済領域(EEA)の加盟国またはスイスの領土内に拠点を置く企業、またはその他の理由で一般データ保護規則(GDPR)の適用対象地域に拠点を置く企業の場合、チェックを入れます。
詳しくはデータ処理に関する修正条項を読んでみてください。

タグをWebページに貼り付ける

アカウントとコンテナが作成されると、動作に必要なタグが表示されます。
閉じてしまった場合は、次の手順で開きます。

タグの表示

①管理タブを開く
②「Google タグ マネージャーをインストール」をクリックする

GTMタグの表示

タグの挿入

タグは二つに分かれています。

GTMタグ

挿入方法1:手作業

上段①をWebページのheadタグ内に、下段②をbodyタグ内の一番初めに挿入します。

<html>
<head>
<!-- Google Tag Manager -->←①を挿入
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PWWWWWW');</script>
<!-- End Google Tag Manager -->

・・・その他のタグ
</head>
<body>
<!-- Google Tag Manager (noscript) -->←②を挿入
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PHV5HMW"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

・・・その他のタグ
</body>
</html>

WordPressの場合テーマによっては、この位置に挿入できるようにプログラムが組まれています。
賢威8も「賢威の設定」→「埋め込みコード設定」で挿入可能です。
その他のテーマをお使いの方は、一度探してみてください。

挿入方法2:プラグインで挿入

テーマにタグを挿入する機能が組み込まれていない場合、ここから何もできなくなってしまって諦めてしまう人が多いと思います。

WordPressを使用している人は、プラグインを使用するのが手っ取り早いです。

Site Kit

GoogleはSite Kitというプラグインを用意していて、これを使用するとGTMを含めたGoogleのタグを管理できるようになります。

しかも、サーチコンソールやアナリティクス、アドセンスなどのデータをダッシュボード上で一元管理できるようになります。
とはいえ、あまりおススメしません。

おススメしない理由

便利!と思うかもしれませんが、機能が増えるということはそれだけサーバーに負担をかけるということです。
サーバーの負担が増えると、それだけWebページの表示速度が遅くなり、閲覧者が離脱する原因になります。
個々のツールを一元管理したいというだけの理由でこのツールを導入するのは、あまりおススメできません。

タグを挿入するだけのプラグインがベストです。

Google Tag Manager for WordPress

GTMタグの自動挿入は、タグを挿入するだけのプラグインを使用するのがベストです。

しかし特におススメはないので、ここでは一番インストールされている「Google Tag Manager for WordPress」を紹介します。

(1) WordPressのプラグインを追加画面で、「Google Tag Manager for WordPress」を検索し、次のプラグインをインストールします。

(2) GTMのIDをコピーします

※IDはGTMのワークスペースタブの右側に表示されています。

GTMのIDをコピー

(3) Google Tag Manager IDに、コピーしたIDを貼り付け、変更を保存ボタンで保存します。

GTMのIDを貼り付け

GTMにアナリティクスタグをセット

次にアナリティクスタグをGTMにセットします。

GTMに追加するタグの新規作成

(1) ワークスペースのタグを開き、新規を押します。

タグの設定

(2) タグの設定右側のペンマークをクリックします。

タグの追加

(3) タグタイプが表示されるので、目的のタグを選択します。

タグタイプの選択

追加するタグのタグの設定

次にタグの設定をおこないます。

以前のタグ(ユニバーサルアナリティクス)とGA4を同居させることもできます。

ユニバーサルアナリティクスの場合

(1) タグタイプから「Googleアナリティクス:ユニバーサルアナリティクス」を選択します。

(2) タグ設定画面が表示されます。

(3) 「Google アナリティクス設定」から、「新しい変数…」を選択します。

トラッキングIDを入力

(4) トラッキングIDを入力する画面が表示されるので、トラッキングID(UAから始まるID)を入力します。

(5) 右上の「保存」を押します。

(6) 入力したIDは変数として保存されます。名前を付けて保存します。

GA4設定の場合

(1) タグタイプから「Googleアナリティクス:GA4設定」を選択します。

(2) 測定IDにGから始まる測定IDを入力します。

GA4IDを入力

※測定IDは、アナリティクス上のストリームの詳細画面で確認できます。

測定ID確認

トリガーを追加

トリガーにALL Pagesを追加します。

ALL Pagesを追加

保存を押す

保存を押すと名前を付けて保存します。

GTMにアドセンスの自動広告をセットする

アドセンスはGTMでサポートされていません。
そこで、タグタイプからカスタムHTMLを選択すれば実装できますが、上手く動作しないことが多いです。

GTMにアドセンスは非推奨

詳しく解析すれば動作する可能性がありますが、アドセンス側の仕様変更があったとき動作しなくなる危険性があります。

よってアドセンスは、GTMを使用しないで、直接Webページに埋め込みましょう。

そもそもGTM側でサポートされていないのは、技術的に難しいということかもしれません。

表示確認(プレビュー)

追加したタグに問題がないか、実際のWebページに反映する前に確認します。

(1) プレビューボタンを押します。

(2) ブラウザの新しいタブで、Tag Assistantページが表示されます。ポップアップが制限されていると表示されないことがあるので、解除してください。

(3) URLにタグが実行される既存(公開済み)WebページのURLを入力し、Startボタンを押します。

(4) 指定したWebページが新規タブで開かれます。全部で3つのタブが開かれたことになります。

GTMとタグアシスタントとWebページが開かれている

(5) Webページに表示の乱れがないか確認します。

(6) 真ん中のTag Assistantページタブを表示します。

(7) Connected!画面の「Continue」ボタンを押します。

Connected!画面の「Continue」ボタン

(8) Summaryを開きます。

(9) 「Tags Fired」にタグ名があればタグが実行されています。

(10)「Tags Not Fired」にタグ名があるなら実行されていません。GTMの設定を確認して、もう一度プレビューをします。

変更を反映

GTMにセットしたタグは、公開ボタンを押すことで反映されます。

公開ボタン

公開ボタンを押すと次のような画面が表示されるので、バージョン名にわかりやすい文字を入力して、再度、公開ボタンを押します。

変更の送信

アナリティクスを開き、データを受信しているか確認します。

アナリティクスを開き、データを受信しているか確認

※PVがない場合は、自分でページを表示することで確認できます。

リンククリックイベントを測定する

最後に、リンクのクリックイベントをアナリティクスに送信するように設定してみます。

変数の定義

クリックしたリンクタグの情報を取得できるように、変数を定義します。

(1) 変数を選択し、「設定」をクリックします。

(2) 組み込み変数の設定で、クリックから次の図のようにチェックを入れて「×」で閉じます。

「Click Classes」「Click ID」「Click URL」「Click Text」にチェックを入れる

(3) 選択した内容は自動で保存されています。

トリガーの定義

リンクをクリックしたかどうかは、トリガーが判断してくれます。
これを正確にできれば、自由自在にリンククリックを制御できます。

(1) トリガーを選択し、新規ボタンを押します。

(2) トリガーのタイプから「リンクのみ」を選択します。

(3) タグの配信を待つにチェックを入れます。これにより、イベント測定漏れの確率が減ります。

(4) 「これらすべての条件が true の場合にこのトリガーを有効化」を次のように設定します。3つ目はWebサイトのURLを入力します。

1番目:Page URL 2番目:先頭が一致 3番目:ドメイン名

※これは全てのページを対象とした設定です。他の値を選択することで一部のページのみでトリガーを動作させるなど細かい設定ができます。

(5) 「このトリガーの発生場所」で「一部のリンククリック 」を選択します。

(6) 「イベント発生時にこれらすべての条件が true の場合にこのトリガーを配信します」の条件を指定します。

一番目は、変数の定義で選択したものが表示されます。

Click Classes:aタグのクラス
Click ID:aタグのID
Click URL:aタグのhrefの内容
Click Text:aタグの文字

(7) 保存を押し、名前を付けて保存します。

イベント用タグの作成

トリガーが定義できたら、イベント用のタグを新規作成し、トリガーとリンクさせます。

ユニバーサルアナリティクスの場合

(1) タグを新規作成し「Googleアナリティクス:ユニバーサルアナリティクス」を選択します。

(2) トラッキングタイプは「イベント」を選択します。

(3) カテゴリ、アクション、ラベル、値に任意の文字列を入力します。

(4) 「Google アナリティクス設定」に、アナリティクスタグを定義したときに保存されたものを指定します。

(5) トリガーに、トリガーの定義で登録したものを指定します。

(6) 保存します。名前は後でわからなくなるので、わかりやすいように変更することをお勧めします。

GA4の場合

(1) タグを新規作成し「Google アナリティクス: GA4 イベント」を選択します。

(2) 「設定タグ」にGA4の設定を行うタグを指定します。

(3) イベント名に任意の文字列を指定します。

(4) イベントパラメータはアナリティクスに送信される値です。パラメータ名は文字列、値は変数を指定します。

{{Page URL}}は、現在のページ、
{{Click URL}}は、リンクタグの遷移先ページです。

(5) トリガーに、トリガーの定義で登録したものを指定します。

プレビューで確認

(1) プレビューでWebページを開きます。

(2) この段階では、イベントが「Tags Not Fired」にあるため実行されていないのがわかります。

(3) Webページで目的のリンクをクリックします。

(4) イベントが「Tags Fired」に移動していれば、成功です。変更を反映してください。

(5) 移動していない場合は設定を確認して、再度プレビューをおこないます。

最後に

ここまでできれば、後はいつでも設定を変更して異なるイベントの取得が可能になります。

ABテストをおこなうときなど必須の設定になるので、頑張ってGTMを導入してみてください。