最近の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] )でクラス名などを調べると良いです。
CSSセレクタの扱い
CSSセレクターの指定方法は以下など、ネットで多くの記事がありますので、それらから調べます。
>>意外と知らない!?CSSセレクタ20個のおさらい|Webpark
ID指定がされていなくとも、昨今のフロントエンドですと、まずCLASS指定はあるので、その親のタグから指定していけば、まあ大抵は指定できるかと思います。
また、CSSセレクタはそもそもGoogleタグマネージャの変数でも使えますので、覚えておくといろいろ役立ちます。変数>新規>DOM要素 からCSSセレクタで指定し値取得に使えます。
トリガーはDOM Ready
IDを付与するためだけのタグであれば、例えば以下のようなタグとトリガーで大丈夫かと思います。トリガーはページビューではなくDOMが整ってから(DOM Ready)のほうが良いでしょう。
あとは、試しにプレビューしてクリックしてみて、Variablesで何らかの値が取れていればOKですし、それでもダメでしたら、また別のCSSセレクターを探して付与して試す、という感じになるかと思います。
とりあえずこうして、なんとか使えそうなDOMにIDを付与できれば、強引にでもクリック計測のトリガーは作れるかと思います。もちろん、付与するのは別にIDでなくても、トリガーに使えそうならば何でも良いと思います。
マーケターであっても何かのときに、Googleタグマネージャをいじって、操作しなくてはいけないときがあると思いますので、JavaScriptとCSSは覚えておいて損はないと思います。
お疲れ様です。
これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん | たにぐちまこと
関連情報リンク
クエリーセレクター、便利です。
>>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などでご指摘いただけますと嬉しいです。
・ ・ ・ ・ ・
>>安っ!アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る
↓↓↓無料のニュースレターを配信中です