GTMでページ内リンクをクリック計測する方法

「グローバルナビゲーション」というと、WEBサイト内の主要ページへの導線として利用されるイメージですが、縦長ペライチページ（以下、ランディングページと書きます。）でも活用されている場合があります。

ランディングページで使われる「グローバルナビゲーション」は、ユーザーにページ下部コンテンツまで見てもらうためのページ内リンクとして用いられ、ユーザーは通常のWEBサイトと同じような感覚で、ランディングページ内を回遊することが出来ます。

ページ内リンクは<a>タグでのリンク先を、IDにすることで機能します。

<a href="#hogehoge">ページ内リンク</a>


〜 中間コンテンツ 〜

<section id="hogehoge">
  <h2>ページ内リンク</h2>
  <p>ページ内リンクの飛び先コンテンツ。ページ内リンクの飛び先コンテンツ。</p>
</section>

しかし、ランディングページのページ内リンクでコンテンツを分けていると、ページが分かれていないのでPV数などで分析することが出来ず、Google Analyticsで「どのコンテンツがよく見られたか」を調べることが難しいです。

そういった時はページ内リンクをクリックされた回数をカウントすることで、PV数に近い指標を調べることが出来ます。クリックされた回数をGoogle Analyticsに送る方法として、「イベントトラッキング」というものを用います。

今回はGTM（Googleタグマネージャー）を用いて、ページ内リンクのクリック計測をする方法を解説していきます。

GTMでページ内リンクがクリック計測できない

GTMは非常に便利なツールで、Google Analyticsのイベントトラッキングもすぐに設定することが出来ます。

今回の場合、

という構成でクリックイベントを送る設定しますが、GTMのクリック計測はいくつか癖があるので注意が必要です。

「リンクのみ」のクリックトリガーでは反応しない

「リンクのみ」のクリックトリガーでは、上手くトリガーが働かずGoogle Analyticsにイベントを送ることが出来ません。

何故かと言うとGTMの「リンクのみ」のクリックトリガーは、「ページ内リンク」「電話番号リンク」など、他ページへの遷移ではない<a>タグは計測対象外だからです。

■OK

<a href="/hogehoge.html">hogehoge</a>

■NG

<a href="#hogehoge">hogehoge</a>
<a href="tel:090-0000-0000">090-0000-0000</a>

ページ内リンクをクリック計測する場合は、あらゆる要素をクリック対象とできる「すべての要素」のクリックトリガーを使います。

「すべての要素」のクリックトリガーだとたまに反応しない時がある

一見万能そうに見える「すべての要素」のクリックトリガーですが、こちらも上手く<a>タグクリックが反応しない時があります。

何故かと言うとGTMの「すべての要素」のクリックトリガーは、クリックされた箇所の一番子供の要素をクリック対象としているからです。

<a href="#hogehoge" class="gtm-click"><span>hogehoge</span></a>
<a href="#hogehoge" class="gtm-click"><img src="/img/hogehoge.png" alt="hogehoge"></a>

という構成だった場合、<span>タグや<img>タグの箇所をクリックされると、親要素である<a>タグがクリックされた扱いにならないのです。

これを防ぐ方法として、クリック対象の<a>タグのCSSセレクタと、その子要素のCSSセレクタを*で指定することで、<a>タグの子要素がクリックされても、トリガーが反応するようになります。

※ 「.gtm-click, .gtm-click *」はサンプルコードの<a>タグclass名が「gtm-click」だったのでこの命名です。サイトごとに計測したい要素のCSSセレクタに変更してください。

また、「すべての要素」クリックトリガーは対象範囲が広くなると、読み込みに負荷がかかったり、よきせぬ部分に影響することもあるので、可能であれば「Page Path」変数で対象ページのみにすることをおすすめします。

※ 「/hogehoge.html」はサンプルURLです。サイトごとにクリック計測したいページのURLに変更してください。

クリックされたページ内リンクの内容をGoogle Analyticsに送信する

<a>タグ内のhref属性の値（ページ内リンクの遷移先ID）を取得する

GTMで自分が作成した変数を使えるようにするには「ユーザー定義変数」というものを登録する必要があります。今回は「Find Closest」関数と「Closest Hash」関数というものを作ってクリックされた<a>タグのhref属性の値を抽出します。

<a>タグ内の子要素がクリックされた際に、<a>タグまで遡る用の関数として、「Find Closest」関数というカスタムJavaScript関数を作成します。

「target」にクリックされた要素を引数として設定して、「selector」に検索したいCSSセレクタを引数として設定することで、CSSセレクタに一致する要素が見つかるまで、クリックされた要素から再帰的に親要素を辿るプログラムです。

◼️Find Closest

function() {
  return function(target, selector) {
    while (!target.matches(selector) && !target.matches('body')) {
      target = target.parentElement;
    }
    return target.matches(selector) ? target : undefined;
  }
}

今回はこのプログラムを用いて、<a>タグの子要素がクリックされたら、親要素の<a>タグを取得するようにします。

「Find Closest」関数を動かすために、今回本命となる「Closest Hash」関数を作り、その中で「Find Closest」を呼び出します。

◼️Closest Hash

function() {
  var el = {{Find Closest}}({{Click Element}}, '[href]');
  return typeof el !== 'undefined' ? el.getAttribute('href').slice(1) : undefined;
}

GTMでは変数を{{Find Closest}}や{{Click Element}}など、{{}}で囲って呼び出します。

var el = {{Find Closest}}({{Click Element}}, '[href]');

では、targetに該当する引数として、{{Click Element}}というGTMがデフォルトで用意している変数を渡しています。{{Click Element}}はクリックされた要素を表す変数です。

また、selectorに該当する引数として[href]を指定することで、クリックされた要素もしくはその親要素にhref属性があるタグを探すようになります。これで子要素がクリックされても親要素である<a>タグを検知することができます。

el.getAttribute('href')

では、クリックされた要素の親要素に<a>タグがあった場合、その<a>タグのhref属性の値を取得しています。

これによってページ内リンクのURL「#hogehoge」という文字列を取得することが出来ますが、Google Analyticsのイベント計測に「#」がついたラベル名が入ってくるのは少し格好悪いので、

slice(1)

を追加して、先頭1文字の「#」を消して「hogehoge」という文字列を抜き出します。

これで{{Closest Hash}}という変数の中には、ページ内リンクの遷移先ID名だけが格納された状態になります。

<a>タグ内のhref属性の値（ページ内リンクの遷移先ID）をラベルにしてイベントトラッキングする

ここまで来たら通常のクリックイベント計測の設定とほぼ同じです。タグで以下のように設定します。

タグで「Google アナリティクス: ユニバーサル アナリティクス」を選択して以下のように設定をします。

クリックイベント計測ではラベル名をユニークなものにして、どこがクリックされたかを示すことが多いので、ラベルに{{Closest Hash}}の変数を用いることで、ID名が付与されたユニークなラベル名になります。一つのタグやトリガーで複数のページ内リンクのイベントトラッキング設定を作ることが出来るので、「クリック要素ごとにトリガとタグを作らないといけない！」という状態を防ぎ、GTMの状態を綺麗に保つことが出来ます。

この方法を活用すれば、ランディングページ内のどのコンテンツが最もクリックされているかなどが分かり、ランディングページ最適化にも活用できますので、ぜひまだ試せていない方がいたら試してみてください。