Googleタグマネージャでクリック計測できないリンクを力技で取得する

by
Share on Hatena Share on Pinterest Share on Pocket

Googleタグマネージャでクリック計測
最近のUIはとても洗練されたデザインが増えてますよね。いっぽうで、クリック計測ができないケースもあり値が取得できない、そのため効果測定ができないといったこともあるかと思います。

こんにちは、Googleタグマネージャ大好きカグア！です。

本記事では、強引に力技でGoogleタグマネージャでクリック計測をする方法を解説します。

関連記事
＞＞Googleタグマネージャだけで仮想PVを計測する方法
＞＞GoogleタグマネージャのYouTubeトリガーと変数で動画再生を調べる：追記有り
＞＞GTM事例：Googleアナリティクスと計算指標でMAみたいなスコアリング

クリック計測できないケース

  • スマホのみ出てくるホバーのリンク
  • 画面下フッターにz-indexで別レイヤーになってるリンク
  • Click IDで値が何もない null などの画像
  • かっこいいUIで Click ID とかが出ない

最近は、UIのデザインがかっこいいサイトも増えてきましたが、データが簡単には取れないケースも増えているとは思います。
クリック計測できない

上図のように、プレビューモードで、計測したいリンクをタップしても、GoogleタグマネージャのプレビューのVariablesに、クリック関連の値がどれも取得できない、という状況です。

今回のTIPSはこうした状況のときに、どうするかという事例です。

力技でクリック計測する仕組み

  • Googleタグマネージャの新規タグでID付与のカスタムHTMLを書く
  • DOM READY トリガーで発火
  • プレビューでクリックしClick IDのVariablesに出ればOK
  • あとはクリックトリガーでそのIDを条件に使用するなど

カスタムHTMLタグを使い、JavaScriptを使えば IDを後から DOMに付与することができます。他にも方法はあるかと思いますが、私はよくクエリーセレクタを使っています。

サイト制作時にデザイナーさんにIDを付与してもらえれば理想ですが、すべてのケースで出来るわけではないと思いますので、後から付与する意味では、力技なのですが、まあ覚えておいて損はないと思います。

注意点としては、後から付与するID名は、既存のものと被らないようにする、です。

では、実装方法です。

ID付与のJavaScript実装方法

setAttribute()でID付与

setAttribute()を使いますと、オブジェクトに属性を追加できます。今回はIDという属性に名前を追加します。

以下のコードを実行しますと、コンソールにはH1の中身が表示されます。

var a = document.querySelector('h1');
a.setAttribute('id', 'hogehoge');
console.log(document.getElementById('hogehoge').innerHTML);

setAttribute() を使ってIDを付与しましたので、その後のdocument.getElementById()で指定できていることがわかるかと思います。

querySelectorでの指定方法

クエリーセレクタで指定できるオブジェクトであれば、上記のように後からでもID付与ができます。

ですので、付与したいオブジェクトの指定方法を調べるとき、例えばChromeですと、デベロッパーツール（Windowsは[F12]、Macは [option]+[command]+[i] ）でクラス名などを調べると良いです。
DOMの調べ方

CSSセレクタの扱い

CSSセレクターの指定方法は以下など、ネットで多くの記事がありますので、それらから調べます。
＞＞意外と知らない!?CSSセレクタ20個のおさらい｜Webpark

ID指定がされていなくとも、昨今のフロントエンドですと、まずCLASS指定はあるので、その親のタグから指定していけば、まあ大抵は指定できるかと思います。

また、CSSセレクタはそもそもGoogleタグマネージャの変数でも使えますので、覚えておくといろいろ役立ちます。変数＞新規＞DOM要素 からCSSセレクタで指定し値取得に使えます。
DOM要素

トリガーはDOM Ready

IDを付与するためだけのタグであれば、例えば以下のようなタグとトリガーで大丈夫かと思います。トリガーはページビューではなくDOMが整ってから（DOM Ready）のほうが良いでしょう。
クエリーセレクターでDOM指定

あとは、試しにプレビューしてクリックしてみて、Variablesで何らかの値が取れていればOKですし、それでもダメでしたら、また別のCSSセレクターを探して付与して試す、という感じになるかと思います。

とりあえずこうして、なんとか使えそうなDOMにIDを付与できれば、強引にでもクリック計測のトリガーは作れるかと思います。もちろん、付与するのは別にIDでなくても、トリガーに使えそうならば何でも良いと思います。

マーケターであっても何かのときに、Googleタグマネージャをいじって、操作しなくてはいけないときがあると思いますので、JavaScriptとCSSは覚えておいて損はないと思います。

お疲れ様です。

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん | たにぐちまこと

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん | たにぐちまこと |本 | 通販 | Amazon
Amazonで詳しく見る

関連情報リンク

クエリーセレクター、便利です。
＞＞document.querySelector() – Web API インターフェイス | MDN

JavaScriptの実行テストができます。
＞＞2018-08-07 12:09:12 – Runstant | runstant

非ライブラリなので使い所多くて助かります。
＞＞ライブラリを使わない素のJavaScriptでDOM操作 – Qiita

ALLはリスト形式で値を返してくれます。
＞＞JavaScriptのセレクタの取得方法を考えてみる – Koltatt

まとめ

最近のUXはとてもかっこよく素敵なものが多いですが、いっぽうで、高度なCSSやJavaScriptのライブラリなど、計測の難易度が増している気がします。

そういうとき、もっとスマートに計測できればなあと自分のスキルの低さを嘆く一方で、なんとか力技でもねじ込んで結果を出す。JavaScriptにはいつも助けられていますね。

もっと良い方法がありましたら、ぜひSNSなどでご指摘いただけますと嬉しいです。

・　・　・　・　・

＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る

↓↓↓無料のニュースレターを配信中です

ドム


Post Views: 107