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

  • 公開日:2018/10/23
  • 更新日:2018/10/24
  • 投稿者:n bit

Googleタグマネージャを使ってウェブサイト内の特定リンクをクリックした時イベントトラッキングする方法を図付きで解説。特定リンクのクリックでトリガーする方法とトリガーしたときにGoogleアナリティックスへ記録する設定方法です。

  • Google アナリティクス
  • Google タグマネージャー

この記事は約 分で読めます。(文字)

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

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

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

Googleアナリティックスと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タグマネージャー)でトリガーのセッティングから行っていきます。トリガーはイベントを発生させるタイミングを決めるための設定です。

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

Googleタグマネージャーのイベントトラッキング トリガーセッティング

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

Googleタグマネージャーのイベントトラッキング 新規トリガー

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

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

Googleタグマネージャーのイベントトラッキング トリガータイプの選択

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

Googleタグマネージャーのイベントトラッキング リンククリックのみ

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

Googleタグマネージャーのイベントトラッキング タグの配信を待つ

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

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

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

Note

トリガー設定を有効化する範囲を限定したい場合はここの設定を任意で変更しておいてください。

Googleタグマネージャーのイベントトラッキング トリガー設定の配信場所

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

Googleタグマネージャーのイベントトラッキング 1部のリンククリックのみ

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

Googleタグマネージャーのイベントトラッキング トリガーの対象コード

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

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

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

Googleタグマネージャーのイベントトラッキング リンククリックのフィルタリング

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

Googleタグマネージャーのイベントトラッキング トリガーセッティングの保存

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

Googleタグマネージャーのイベントトラッキング 保存されたトリガーセッティング

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

タグの設定

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

Googleタグマネージャーのイベントトラッキング 新規タグの追加

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

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

Googleタグマネージャーのイベントトラッキング タグを発行するトリガーの設定

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

Googleタグマネージャーのイベントトラッキング 作成済みトリガーの選択

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

Googleタグマネージャーのイベントトラッキング タグタイプの設定

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

Googleタグマネージャーのイベントトラッキング タグタイプユニバーサルアナリティックスを選択

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

Googleタグマネージャーのイベントトラッキング イベントを選択

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

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

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

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

Googleタグマネージャーのイベントトラッキング イベントのトラッキングパラメーター設定

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

Googleタグマネージャーのイベントトラッキング トラッキングパラメータの追加

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

Googleタグマネージャーのイベントトラッキング トラッキングパラメーターの変数を選択

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

Googleタグマネージャーのイベントトラッキング デフォルトのトラッキングパラメータ

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

Googleタグマネージャーのイベントトラッキング Click ID

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

Googleタグマネージャーのイベントトラッキング オーバーライド設定を有効化

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

Googleタグマネージャーのイベントトラッキング トラッキングIDの入力

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

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

内に表示されています。

Googleタグマネージャーのイベントトラッキング トラッキングID

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

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

Googleタグマネージャーのイベントトラッキング 詳細設定

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

Googleタグマネージャーのイベントトラッキング タグ設定の保存

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

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

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

Googleタグマネージャーのイベントトラッキング プレビューの開始

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

Googleタグマネージャーのイベントトラッキング プレビュー中

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

Googleタグマネージャーのイベントトラッキング Googleアナリティックスリアルタイムイベント数

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

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

Googleタグマネージャーのイベントトラッキング プレビューウインドウ

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

Googleタグマネージャーのイベントトラッキング 発行確認

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

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

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

Googleタグマネージャーのイベントトラッキング Googleアナリティックスリアルタイムイベント数の増加確認

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

Googleタグマネージャーのイベントトラッキング トリガーの対象コード

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

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

Googleタグマネージャーのイベントトラッキング プレビューモードの終了

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

Googleタグマネージャーのイベントトラッキング プレビューモードの終了確認

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

Googleタグマネージャーのイベントトラッキング 公開

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

Googleタグマネージャーのイベントトラッキング バージョン名の入力

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

Googleタグマネージャーのイベント 公開完了

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

Googleタグマネージャーのイベント ブラウザでの動作チェック

今日のdot

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

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

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

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

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

▲ ページの先頭へ戻る

このページの目次

目次