悩めるWEB担当者様のための最新ノウハウをお届け

GTM(Google Tag Manager)を使ったスマートなGAのイベントトラッキングの設定方法

pexels-photo-265087

こんにちは。マーケティングDivの樋上です。

今回はGTM(Google Tag Manager)を使ったGA(Google Analytics)でのイベント計測方法を紹介いたします。
現在イベントトラッキングのためにソースを書き換えている方や新たにイベントトラッキングをしたいと考えている方にGTMを使ったイベントトラッキングの設定の流れを知ってもらい、GTMの利用を検討していただけたらと思います。

GoogleAnalyticsの基本的な使い方がわかる無料eBook公開中!
ダウンロードはこちらから!また、弊社ではGoogle Analyticsの効果的な使い方やレポートの作成の方法、
PDCAの回し方などがわかる無料セミナーを実施中!詳細は下記URLから
https://digitalidentity.co.jp/service/access-analytics/seminar.html

さっそくですが、みなさんはこんな情報をGAで集めたいと思ったことはありませんか?

特定のボタンのクリック数
PDFのダウンロード数
ページのスクロール度合い

イベント計測でできるようになること

ボタンのクリック数が計測できれば、同じとび先であっても、ボタンごとのページ遷移の貢献度を測り、必要なボタン、不必要なボタンの選定ができます。
スクロールを計測できるようになると、記事ページがどの程度読まれているか(滞在時間とは別の視点から)検証する事ができます。

このようにイベント計測ができるようになると、GAにおいてデフォルトで計測できる情報以上の情報を集めることができるようになり、サイトを改善していく指標の一つとする事ができます。

GTMの紹介

ただ実装しようとすると、ページソースの変更が必要になり、少しハードルが高いですよね。
そんなとき頼りになるのが、GTMというツールです。
GTMは複数のタグを一括管理するタグマネジメントツールです。

これを使うことで、実際のhtmlソースを書き変えることなく、GTM上だけで、複数のタグを管理する事ができます。
また、タグの作成方法もページを直接書き換えるよりは必要な知識は限定的です。
さらに、タグが正常に動いているかどうか確認できる機能もあります。
まだ入れていない方も、GTMを入れるだけで、タグの管理が効率化されるため、ぜひおすすめいたします。

GTMの構成要素

まず、GTMの構成要素ついて説明いたします。
GTMの計測設定は大きく「タグ」「トリガー」「変数」で構成されています。

・「タグ」:htmlタグのことです。GTM上では、GA・アドワーズなどのタグをGUIで作成できます。
・「トリガー」:タグが発火する条件を指定する部分です。
・「変数」:閲覧しているページURLやクリックされた要素のリンク先など、環境に応じて変わる値です。これに関して一致や大小関係などの条件でトリガーの発火を決めます。

これらを組み合わせることで任意のイベントを計測できるようになります。
では例として以前の記事の「【自動化でラクラク!Googleスプレッドシートアドオン+Google Analyticsで作るレポート作成方法】」のページ下部にある緑のボタンクリック数の計測方法を紹介いたします。

button

イベント計測の設定例

GTMが対象サイトに導入されているという条件のもと、このGTMを使ってGAのイベント計測用のタグを作成する手順を見ていきます。

変数の作成

今回はボタンクリックの計測を行うため、クリック関係の変数を作成していきます。
作成手順はまずページ左部の「変数」をクリックし、組み込み変数の「設定」をクリック、右側にでるスライドバーのクリック関係変数のチェックボックスにチェックを入れていきます。

ブログ①

それぞれの変数と説明は下記のようになります。

変数名 説明
Click Element クリックされたタグの要素
Click Classes クリックされたタグのクラス属性値
Click ID クリックされたタグのID属性値
Click Target クリックされたタグのtarget属性値
Click URL クリックされたタグのURL
Click TEXT クリックされたタグのテキスト(内容)

これで変数の作成は完了です。

トリガーの作成

作成手順はまずページ左部の「トリガー」をクリックし、「新規」をクリック。
ページ右側からスライドバーがでるため、任意のトリガー名を記入します。
その後、トリガーの設定の枠をクリックします。

ブログ②

すると、新たにページ右部にスライドバーが出ます。
今回のボタンは別ページへのリンクを有しているため、クリックの「リンクのみ」を選択します。

ブログ③

今回は特定のボタンの計測をしたいため、一部のリンククリックを選択します。
このバナーにはユニークにaタグに対してID属性が付与されているため、「ClickID」、「等しい」、「greenBanner」を選択します。
今回のようにIDがふられていない場合には、タグのテキスト内容(Click TEXT)、リンク先のURL(Click URL)、タグのCSSセレクタ(Click Element)などをよく使います。
その際にはその要素が計測したいものだけを抽出できているか(他のタグに反応していないか)注意が必要です。
トリガー条件が指定出来たら、保存をクリックします。

ブログ④

タグの作成

最後に上記の条件下でイベントを計測できるようにGAタグの設定をしていきます。
ページ左部の「タグ」をクリックし、「新規」をクリック。
ページ右側からスライドバーがでるため、任意のタグ名を記入します。

ブログ⑤

その後、「ユニバーサルアナリティクスタグ」を選択し、トラッキングタイプでは「イベント」を選択します。
(イベント)カテゴリ、(イベント)アクションに任意のものを記入します。
「このタグでオーバーライド設定を有効にする」をチェックし、トラッキングIDに計測するGAのプロパティIDを入力します。
次にトリガーのトリガー設定の枠をクリックします。

ブログ⑥

先程作成したトリガー(※画像内では問い合わせボタンGA計測)を選択し、保存を選択します。

ブログ⑦

これで計測設定は完了しました。

本番環境への反映

最後にこの編集を本番の環境に反映させていきます。
管理画面右上の「送信」をクリックし、

ブログ⑧

任意の名前を設定の上、「公開」をクリックすることで、本番環境に反映されます。

ブログ⑨

設定に成功すると、下のようにGA上でイベントが起こった数値を計測できるようになります。

ga

まとめ

以上でGTMを使ったイベント計測の作成手順の説明を終わります。
最初は戸惑う部分もあるかもしれませんが、慣れるとGTMを使うことで効率的にイベントトラッキングができるようになります。
また、トリガーや変数の設定を組み合わせることでより、複雑なサイトやユーザー行動でもイベント計測が可能です。
イベント計測に関して、何かお手伝いできることがございましたら、弊社お問い合わせフォームからご連絡いただけますと幸いです。

GoogleAnalyticsの基本的な使い方がわかる無料eBook公開中!
ダウンロードはこちらから!また、弊社ではGoogle Analyticsの効果的な使い方やレポートの作成の方法、
PDCAの回し方などがわかる無料セミナーを実施中!詳細は下記URLから
https://digitalidentity.co.jp/service/access-analytics/seminar.html

関連記事