*

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

公開日: : 最終更新日:2018/11/14 タグマネージャー , , , ,


LINE facebook twitter g+
B! pocket Evernote 楽天


家電&カメラ タイムセール/バーゲン会場/クーポン配布はこちら。
Amazonでクーポンをもらう

【Amazonファッション】メンズ80%オフ商品を見る!
セール商品を見る

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などでご指摘いただけますと嬉しいです。

「ドム」

関連するほかの記事を見てみよう!
このサイトのトップページへ行く

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

Profile



Yoshihiko Yoshida
メディア運営業界23年目。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑