分析・解析

Googleタグマネージャーでクリックされたリンクを特定する方法

  • このエントリーをはてなブックマークに追加
  • Pocket

こんにちは。堀井です。

今回はGoogleタグマネージャ第三弾!クリックイベントを計測します。

画面内に遷移先が同じリンクが複数あって、どのリンクが効果を上げているか調べたいことってありますよね。そこで、ユーザーが各ページでどのリンクをクリックしたのかを調べるためにどうしたら良いかを考えたのでご紹介します。もちろん有料でツールを導入すれば簡単にこの計測は実現してしまったりするわけなのですが・・・

ココではあくまでもGoogleタグマネージャを使ってやってみようということでやっていきます。

取得したい値

ページ内でどのリンクがよくクリックされているのかを知るためには、どんな情報が必要でしょうか。そのままですが、「どこ」で「何」をクリックされたのかの2つです。
この2つが組み合わさって取得できるように、Googleタグマネージャーを利用してやってみたいと思います。

リンクにidをつけていれば

まずココで私の失敗を。サイト作成時にリンクを貼る際に一意のidをリンクにつけていれば、これからやろうとしているよりも簡単にクリックされたリンクの情報を取得出来たようで・・・。これからサイト作成をされる方はクリックイベントをトラッキングしたいリンクにはidをつけることをおすすめ致します。

クリックイベントを取得する

では早速Googleタグマネージャーを使用してGoogleAnalyticsでクリックイベントを計測する方法を説明していきたいと思います。

①クリックリスナータグを発行する

新しいタグを作成>タグの種類:イベントリスナー>クリックリスナー

まずはイベントを発生させるクリックリスナータグを作成します。このタグの配信ルールは『全てのページ』のみを追加します。タグの名前は任意で設定して構いません。ここでは『LinkClick』とします。

SnapCrab_NoName_2013-12-6_11-15-34_No-00

②マクロで自動イベント変数を作成する

新しいマクロを作成>マクロのタイプ:自動イベント変数>変数タイプ:要素

このマクロはクリックしたリンクの情報を保持するために後で使用します。マクロ名は任意ですがここでは『linkElement』としましょう。

SnapCrab_NoName_2013-12-6_11-35-39_No-00

③カスタムJavascriptを使用してクリックしたリンクの情報を取得するマクロを作成する

新しいマクロを作成>マクロの種類:カスタムJavascript

ユーザーがクリックしたリンクのテキスト要素を取得するマクロを作成します。以下のコードをカスタムJavascriptで使用します。※jQuery を利用しています。

function(){
    // クリックされた対象を jQuery オブジェクトに変換
    var $linkElement = jQuery({{linkElement}});
    // 前後の空白を除去してアンカーテキスト取得
    var text = $linkElement.text().replace(/^\s+|\s+$/g, "");
    // テキストリンクの場合はアンカーテキスト
    if (text) {
        return "text: " + text;
    }
    var alt = $linkElement.find("img").attr("alt");
    // 画像リンクの場合は altの文章
    if (alt) {
        return "image: " + alt;
    }

    // alt も取れない場合は遷移先のURL
    return "other: " + $linkElemtn.attr("htrf");
}

※URLだとlink先が同じポタンが複数あった時に困るのでテキスト要素を取得する必要があります。テキストが同じ場合は、要素の順番とかを付与するといいかもしれません。

SnapCrab_NoName_2013-12-6_11-42-45_No-00

④ルールを作成する

>新しいルールを作成

Googleタグマネージャーにイベントを飛ばすためのルールを作成します。ルールとして追加する条件は以下のようになります。

条件:[{{event}}][等しい][ gtm.linkClick]

SnapCrab_NoName_2013-12-6_15-39-51_No-00

⑤GoogleAnalyticsのタグを作成する

新しいタグを作成>タグの種類:Googleアナリティクス>トラッキングタイプ:イベント

GoogleAnalyticsで発生したイベントを取得するためのアナリティクスのタグを作成します。このタグの設定通りにGoogleアナリティクスくに表示されます。操作は操作が行われた場所のURL、ラベルはクリックされたURLのテキスト情報を設定します。

カテゴリ:click
操作:{{url}}
ラベル{{linkurl}}

ルールには④で作成したルール『クリック』を追加します。ウェブプロパティIDはGoogleアナリティクスのIDを入力します。

SnapCrab_NoName_2013-12-6_14-2-47_No-00

⑥バージョン作成

コンテナ>サマリー>バージョンを作成>公開

これでタグマネージャの設定は全て終わりです。あとはアナリティクスで操作のURLごとにイベントを集計して見れば、そのURLでどのリンクがどれだけクリックされているかがわかります。

SnapCrab_NoName_2013-12-6_14-22-26_No-00

Googleタグマネージャ イベントリスナー攻略

第1回、2回のタイマーリスナーに続き、今回はクリックリスナーを使ってみました。まだまだタグマネージャとアナリティクスでできることはたくさんあると思うので、いろいろ[とやってみたいなと思います。イベントリスナーももう少し自在に使えるよう、勉強したいと思います。

最後までお読みいただきありがとうございました☆

第1回【Googleタグマネージャで画面スクロール位置を取得する方法

第2回【Googleタグマネージャで画面スクロール位置からユーザー離脱位置を取得する方法

CDP INTEGRAL-CORE
  • follow us in feedly
  • このエントリーをはてなブックマークに追加