Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

Organization

GoogleタグマネージャでGoogleAnalyticsのクリックイベントをdataset(data属性)で取る方法

Googleタグマネージャを使ってGAを管理していて、クリックイベントを取りたかったんだけど
dataset(data属性)を使った場合の使い方がどうにも分からなかったのでいろいろ頑張って調べました。

超結論

このさき、タグマネージャでのGAの使い方とか色々説明して、最後に結論書いてますが
そんなのいらねぇよ!って場合はこの結論見て先に進んでおしまいなさい。

GAのエレメントからdata属性を取りたい場合は

gtm. element.dataset.XXXX
ただしXXXXはキャメルにする。
でございます。

では本編のはじまりはじまり〜

前準備

  • GAのアカウントを取得
  • タグマネージャのアカウントを取得

してください。

GoogleタグマネージャにGAタグを埋め込む

GAタグを埋め込んでみましょう。

タグの作成

まずは左メニュー、もしくはサマリーから、新しいタグを追加します。

タグの設定で鉛筆アイコン > タグタイプを選択からユニバーサルアナリティクスを選びます。

スクリーンショット 2018-06-01 16.43.27.png

トラッキングタイプ:イベント
Googleアナリティクス設定:新しい変数

を選択し、トラッキングIDを入力出来るので
そこにトラッキングIDを入力しましょう。
(Analyticsの管理 > プロパティ設定 UA-XXXXX から取得可能)
変数名を、「アナリティクストラッキングコード」 にして保存しましょう。

スクリーンショット 2018-06-01 16.47.09.png

トリガーの設定

トリガーの選択を押すと、AllPagesというトリガーが選択できると思うのでそれを選んで終了。
最後にタグの名前を「ユニバーサルアナリティクス」にして保存。

スクリーンショット 2018-06-01 16.55.36.png

一度公開。

公開前に上手いこと反映できているかを確認できます。
画面右上にプレビューボタンがあるのでポチッとな。
するとプレビュー中であることを超主張してくれます。

スクリーンショット 2018-06-03 12.34.59.png

実際の画面を見てみるとこんな感じでプレビューができます。
今回は先日リリースした「icon-search」を見てみましょう。

スクリーンショット 2018-06-03 12.36.55.png

タグマネージャが実行されたタイミング、成否などがこの拡張タブから分かります。

やっと本題、クリックイベントを取る

はい、ではこの「icon-search」というサイトではワンクリックで
glyphicon、font-awesomeで使えるiタグをクリップボードにコピーできるという特徴があります。
今回どのアイコンが人気かを調べたかったので、このボタンが押されたら
対応するIDをGAにクリックイベントを送り込むという実装を行おうと思います。

スクリーンショット 2018-06-03 12.44.19.png

↑いやー便利そうなサイトだねー(棒

前準備

スクリーンショット 2018-06-03 13.00.26.png

このボタンにdata-clip-id という属性を付けます。このadjustだと

<button class="copy-btn large-2 fa fa-copy" 
  data-clipboard-target="#c3" 
  data-clip-id="3">
</button>

こんな感じのHTMLになっております。data-clipboard-targetはあまり気にしないでね。

タグマネージャの設定

さっきと同じ手順で左メニュー、もしくはサマリーから、新しいタグを追加します。

タグの設定で鉛筆アイコン > タグタイプを選択からユニバーサルアナリティクスを選びます。
今回は、トラッキングタイプで「イベント」を選択します。

カテゴリ、アクションは各々必要な情報を入力。
今回icon-searchでは特に要らなかったのでcopy-btnという文字列を付けました。

で、ラベルの部分を今回「data-clip-id」の値で取得したいです。
ラベル入力の横にあるレゴブロックみたいなボタンをクリックして、変数の作成を行います。

スクリーンショット 2018-06-03 13.11.52.png

スクリーンショット 2018-06-03 13.18.32.png

新規作成したら、変数のタイプに「データレイヤー変数」を選択します。
で、データレイヤーの変数名に

gtm.element.dataset.clipId

と書きましょう。これを見つけるのに時間がかかった・・・
あとは適当に「data-clip-id取得」とか名前を付けて保存。

スクリーンショット 2018-06-03 13.22.41.png

最後に変数の下にあるトリガーの設定です。
class="copy-btn"のものをクリックしたときに、イベントを発生させたいので
トリガーの種類:クリック(すべての要素)
トリガーの発生場所:ClickClass 含む copy-btn

で作成すればOK。

あとはさっきの手順でクリックしたときにイベントが発生するかのテストを行い、上手く行けば公開しましょう。

というわけで、GAのエレメントからdata属性を取りたい場合は

gtm. element.dataset.XXXX
ただしXXXXはキャメルにする

でございました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?