Googleタグマネージャで特定のリンククリックをイベントトラッキング

Googleタグマネージャで特定のリンククリックをイベントトラッキング

今回はあるページ内にある特定リンクから同じサイト内のページへの遷移を計測するためのイベントトラッキングを設定します。

ユーザを効果的に特定のページ遷移させることができているか、想定のシナリオ通りにサイト内の回遊を創出できているか等の効果測定が簡単になりますのでページビューやコンバージョンを増やすための施策やその改善が成果として結果につながりやすくなります。

GoogleアナリティックスとGoogleタグマネージャーのアカウント登録や基本的な設定がまだ終わっていない方は下記のページを参考にして済ませておいてください。

Googleアナリティクスのアカウント作成とトラッキングコード設置方法

後々のメンテナンス性等も考えGoogleタグマネージャー（GTM）を利用したGoogleアナリティックスのトラッキングコード設置方法を解説。手順通りに進めれば初心者でも設定ができるように新規のアカウントの作り方から数多くの画像を利用しわかりやすく説明します

この記事を読む ≫

今回実際に実装するページ等の設定は下記です。

• リンク元ページ：https://dot-blog.jp/news/python-enumerate-function/
• リンク元ページ内の特定リンク：<a href="/news/python-introductory-course/" id="plink-19">この記事を読む ≫</a>
• リンク先ページ：https://dot-blog.jp/news/python-introductory-course/

リンク元ページ内の特定リンク周りは下記のようなコードになっています。

<div class="pr_link python_introductory_course">

	<h3 id="chapter-7">【フリーランス向けの完全無料Pythonプログラミング講座】</h3>

	<p>dot blogではこの記事以外にも完全無料でフリーランス向けのPythonプログラミング講座を公開中です。フリーランスとして活躍し稼ぐための強力な武器となりますよ。</p>

	<div class="row plink">

		<div class="col-sm-3 left">

			<img src="/media/images/thumbnail/thumbnail-00100.png">

		</div>

		<div class="col-sm-9 right">

			<p class="h5_title">Python入門講座【フリーランス向け完全無料講座】</p>

			<p>最近特に注目度が高くなってきているプログラミング言語Python。フリーランス、独立・起業を検討中、日々の業務が忙しい社会人等なら今こそ身に付けておきたいスキルの1つです。初心者向けにやさしい内容の学習講座を無料で公開しています。</p>

			<p><a href="/news/python-introductory-course/" id="plink-19">この記事を読む ≫</a>

			</p>

		</div>

	</div>

</div>

同ページ内に複数のリンクがあった場合でも特定できるように各aリンクタグには固有のIDが割り振られています。

<a href="/news/python-introductory-course/" id="plink-19">この記事を読む ≫</a>

このリンク元ページ（https://dot-blog.jp/news/python-enumerate-function/）内の特定リンク（<a href="/news/python-introductory-course/" id="plink-19">この記事を読む ≫</a>）がクリックされ、リンク先ページ（https://dot-blog.jp/news/python-introductory-course/）へユーザが遷移したときにイベントが発生しGoogleアナリティックスのイベントレポートに記録されるように設定していきます。

トリガーの設定

まず最初にGTM（Googleタグマネージャー）でトリガーのセッティングから行っていきます。トリガーはイベントを発生させるタイミングを決めるための設定です。

左横のメニューから「トリガー」をクリックしてください。

トリガーの設定画面が表示されましたら新しいトリガーセッティングを作るために「新規」のボタンをクリックします。

下記の画面が新しいトリガー設定の画面です。任意で今回作るトリガー設定の名称を決めてください。私はサイト内のPRリンククリックに対して設定するトリガーですので「PRリンククリックトリガー」とつけています。

名称の入力が完了しましたら画面真ん中のアイコン部分をクリックしてください。

トリガータイプの選択メニューが表示されます。今回はaリンクのクリックに対して設定するトリガーですのでクリック欄の「リンクのみ」を選択してください。

「タグの配信を待つ」と「妥当性をチェック」にチェックを入れてください。

トリガー設定を有効化する範囲を決めます。今回はすべてのページに対してトリガー設定を有効化しますので下記画像のように設定を行ってください。

• Page URL
• 正規表現に一致
• .*

正規表現を使ってすべてのページURLを選択しています。

次にトリガーを発生させる場所を設定します。今回はある特定のリンククリックのみに対してトリガーを発生させるため「一部のリンククリック」を選択してください。

今回GTM（Googleタグマネージャー）を利用してイベントトラッキングを行いたいaリンクは赤枠で囲っている部分です。親のdivタグに毎回共通のクラスが設定されていますのでこちらを利用して設定していきます。

最終は下記画像のような設定になります。

• Click Element
• CSSセレクタに一致する
• .pr_link.python_introductory_course a

CSSセレクタを利用してクラス「.pr_link.python_introductory_course」内の「a」タグのクリック時にトリガーが発生する設定です。

最終的に全ての設定内容は下記画像のようになります。正しく設定できていれば右上の「保存」ボタンをクリックしてください。

保存できればトリガーの項目画面に新しく「PRリンククリックトリガー」が追加されているのが確認できます。

これでトリガーの設定は完了です。

タグの設定

次は実際に発行するタグの設定を行っていきます。左のメニューから「タグ」を選択して表示されたタグ項目の中から「新規」ボタンをクリックしてください。

タグの設定名を任意で入力します。私は「リンククリック」と入力しました。

入力できましたらタグを発行するトリガーに先ほど設定したトリガー設定を利用します。トリガー選択項目の真ん中あたりにあるアイコンをクリックしてください。

先ほど作成したトリガー設定「PRリンククリックトリガー」が表示されていますので選択します。

発行されるタグの設定を行います。タグ設定画面の真ん中あたりにあるアイコンをクリックしてください。

今回はGoogleアナリティックスで記録するためのイベントタグを発行しますので表示されたタグタイプ選択画面から「Googleアナリティックス - ユニバーサルアナリティックス」を選択します。

トラッキングタイプを「ページビュー」から「イベント」に切り替えてください。

イベントトラッキングのパラメーター設定が表示されます。パラメーターの設定内容は今回下記のように行いました。

• カテゴリ：PRリンククリック
• アクション：Click URL (リンク先のURL）
• ラベル：Page URL（リンク元のURL） /-/ Click ID（aタグに設定されているID）
• 値：10

パラメーターの設定内容は任意で決めることができます。後々自分が分析しやすい設定内容にしておくと良いでしょう。

後ほど説明しますが今回の設定内容の場合、どのページのどの位置のリンクからどのページへ遷移したイベントクリックなのかが一目でわかるようになります。

デフォルトに用意されているパラメーター変数を利用する場合は各入力ボックスの右横にあるブロックのようなマークをクリックしてください。

変数の選択画面が表示されますので必要な項目をクリックして選択しましょう。

必要な項目が表示されていなかった場合は右上の「組み込み変数」をクリックすることでデフォルトで用意されている全ての変数が表示されます。

表示されたすべての組み込み変数の中から必要なものを選択しましょう。

イベントトラッキングのパラメーター設定が完了しましたら「このタグでオーバーライド設定を有効にする」にチェックを入れます。

トラッキングIDの入力画面が表示されますので記録するGoogleアナリティックスのトラッキングIDを入力してください。

トラッキングIDはGoogleアナリティックスの

• プロパティ ＞トラッキングコード

内に表示されています。

トラッキングIDを入力しましたら「詳細設定」をクリックして残りの設定を行います。詳細設定の内容は下記のように行いました。

こちらも任意での設定となりますので自分の分析環境に合わせて設定してください。

詳細設定まで入力が完了しましたら右上の「保存」ボタンをクリックして設定を保存します。

タグの項目に先ほど作成した「PRリンククリック」が表示されています。これでイベントトラッキング用の設定は完了です。

Googleタグマネージャーのプレビュー機能で動作確認

正しく動作するかGoogleタグマネージャーのプレビュー機能を使って確認しましょう。右上の「プレビュー」ボタンをクリックしてください。

プレビューモードに切り替わりましたらプレビュー中であることの表示が出ます。ブラウザでイベントトラッキングのタグを設定したページを表示させてみてください。表示がプレビューモードに切り替わっています。

イベントトラッキングの動作の確認にはGoogleアナリティックスのリアルタイムレポートで「イベント」レポートを利用します。

ブラウザでイベントトラッキングタグを設定したページを開くと下側にGoogleタグマネージャーのプレビューウインドウが表示されています。現在はまだリンクをクリックしていないため確認できるのは標準のユニバーサルアナリティックスタグのみです。

イベントトラッキングを設定したaリンクをクリックしてください。

aリンクをクリックするとページが遷移する瞬間Googleタグマネージャーのプレビューウインドウに今回設定したイベントトラッキング「PRリンククリック」タグが発行されます。ページ遷移の間のみですので少し確認しにくいかと思いますがボックスが1つ増えますのでなんとなくわかると思います。

ページ遷移後、Googleアナリティックスのリアルタイム >「イベント」レポートを確認するとタグの「イベントトラッキング パラメータ」で設定した内容通りに記録されていることが確認できます。

• カテゴリ：PRリンククリック
• アクション：Click URL (リンク先のURL）
• ラベル：Page URL（リンク元のURL） /-/ Click ID（aタグに設定されているID）

レポートを確認するとリンク先のURLと、リンク下のURL、そしてページ内のaリンクにつけられたIDタグが一目で見れますので分析作業がはかどりますね。

イベントトラッキングを設定しているaリンクのコード

プレビューモードの終了と設定タグの公開

設定したイベントトラッキングが正しく動作しているのを確認できましたのでプレビューモードを終了し正式に公開します。プレビュー中であることを示す表示枠の下側「プレビューモードを終了」をクリックしてください。

プレビューモードを終了するかどうかの確認画面が表示されますので「OK」ボタンをクリックします。

それでは設定したイベントトラッキングのタグを公開しましょう。プレビューボタンの右横に表示されている「公開」ボタンをクリックしてください。

任意でバージョン名を入力して右上の「公開」ボタンをクリックします。バージョンの説明欄は必要であれば後で変更内容がわかりやすい説明を入れておくと良いでしょう。

公開されましたら公開内容の詳細が下記画像のように表示されます。自分が設定した内容と相違がないか確認しておきましょう。

再度ブラウザの方で設定ページを開きますとGoogleタグマネージャーのプレビューウインドウが終了されています。この状態で再度aリンクをクリックしてGoogleアナリティックスのリアルタイム > 「イベント」レポートを使い正しく動作しているかの最終確認をしておきましょう。

今日のdot

ページ内の特定リンクから他のページへの遷移をイベントトラッキングするケースは数多くあります。

• コンバージョン用ランディングページへの送客を効果測定
• アフィリエイトページへの送客を効果測定
• ユーザのエンゲージメント強化用ページへの送客を効果測定

等バリエーションは様々で、各マーケティング施策にあわせて正しく分析を行わなければいけません。

施策が効果的に機能しているのか、または、改善の必要性があるのか、改善するならばどのページから改善すべきか等の貴重な情報を得るためにもイベントトラッキングを設定しておきましょう。

また下記のページでは今回設定したイベントをGoogleアナリティックスでコンバージョントラッキングする方法を解説しています。合わせて設定しておくことでGoogleアナリティックスを使った分析がやりやすくなりますのでお勧めです。

GoogleアナリティックスでGTM発行のイベントをコンバージョンに設定

Googleタグマネージャを使って設定しているイベントトラッキングをGoogleアナリティックスの目標(コンバージョン)に設定する方法を解説します。コンバージョンの設定から設定の動作確認までを図付きでわかりやすく説明しています。

この記事を読む ≫