Googleタグマネージャでクリックイベントを設定しよう!

なっちゃん


Googleタグマネージャでクリックイベントを設定しよう!

こんにちは! ディレクターのなっちゃんです。

ここ数ヶ月この連載を続けていて「読んでるよ」「勉強になったよ」と声をかけてもらうことが増えました。私自身も、Googleアナリティクスについてはまだまだ知らないことが多いので、初心者の人にも伝わるように言葉を選んだり、キャプチャを入れたりして記事を書くように意識しています。

今日もこの記事を読んでいる人のGoogleアナリティクスLIFEがちょっぴりハッピーになるように、一生懸命、記事を書いていきますね。

ではでは、前回のおさらいです。

前回の連載ではGoogleタグマネージャでGoogleアナリティクスを連携するところまで説明いたしました。

ここまでだったら、別にGoogleタグマネージャを使う必要はありませんね。
なので、今回からはいよいよ、クリックイベントの設定方法について説明いたします。とっても便利なので、ぜひ挑戦してみてください!

今回やりたいこと

LIG WORKSを制作した理由としては、Web制作のお問い合わせを増やす目的があります。そのため、ユーザがどのページからお問い合わせページへ遷移しているのかが、今後のKGI/KPIを決める上で大切な数値となってきます。

そこで今回は以下の3箇所のお問い合わせのクリックイベントを取得しようと考えました。

グローバルナビ

LIG WORKSグローバルナビ

http://creative.liginc.co.jp/

aboutページ

LIG WORKS aboutページ

http://creative.liginc.co.jp/about

制作実績詳細ページ

LIG WORKS 制作実績詳細ページ

http://creative.liginc.co.jp/1227

トリガーを追加しよう

では、Googleタグマネージャの管理画面を触っていきます。

Googleタグマネージャトリガーの新規作成

すべてのお問い合わせのクリックイベント

まずは、ページに関係なく、contactをクリックした数を取っていこうと思います。

イベントを選択

ユーザーがページのリンクや要素をクリックしたときにタグを配信するには、イベントの種類として [クリック] を選択します。クリックだけでは、正確な値が取れないため、どこをクリックしたときに配信するのかを一緒に設定する必要があります。

トリガーを設定

「すべての要素」または「リンクのみ」から指定します。今回は「https://liginc.co.jp/contact/creating/」へ遷移するため、「リンクのみ」を選択します。

Googleタグマネージャのトリガーを設定

タグの配信を待つ、待ち時間の上限、検証をチェックに関しては「?」にマウスオーバーすると、それぞれどういう機能なのか説明が出ます。
今回はそこまで厳重にお問い合わせページが表示されたかどうかを気にしていないため、チェックを外しました。

配信するタイミング

ここがとっても大事! 

Googleタグマネージャの配信するタイミング

「イベント発生時にこれらすべての条件がtrueの場合にこのトリガーを配信します。」とのことなので、一致する条件を入力していきます。
Click URLはクリックされた要素のhref属性にあたるので、遷移先のURLと等しいときという条件を入力します。
Page URLは対象ページなので、http://creative.liginc.co.jp/を含むすべての下層ページを指定したいので、含むという条件を入力します。

以上の設定が完了したら、トリガーを保存します。

タグを追加しよう

トリガーの準備ができたら、次はそのデータをGoogleアナリティクスに送るためにタグを設定します。

Googleタグマネージャのタグを追加

プロダクトを選択

Googleアナリティクスを選択します。

タグの種類を選択

ユニバーサルアナリティクスを使用している場合は、ユニバーサルアナリティクスを選択してください。そうでない場合は、従来のGoogleアナリティクスを選択します。

タグを設定

トラッキングID

Googleアナリティクスの「管理」→「プロパティ設定」から確認できます。ここの入力を間違ってしまうと、正しくデータが送られないため、気を付けましょう。

ディスプレイ広告

有効化にしましょう。ユーザーの年齢、性別、分布などの情報を取得できるようになります。

トラッキングタイプ

今回はクリックイベントを取得したいため、「イベント」を選択します。

カテゴリ・アクション・ラベル

Googleアナリティクスのイベント

この階層のトップレベルは「カテゴリ」です。これは、イベントが発生している場所の詳細を示すそうなので、contactと名前を付けておきます。第二階層となるのが「アクション」です。ユーザの行動につける名前なので、click-contactとしておきます。第三階層となるのが「ラベル」です。このイベントに関してさらに詳しく分けたときの名前なので、{{Page URL}}と入力して、どのページからクリックをしたのか取得してみたいと思います。

Googleタグマネージャのタグの設定

配信するタイミング

ここで、先ほど設定したトリガーを使います。次のタイプの中から1つ以上のトリガーを選択してくださいでは、クリックを選択します。タグを配信するトリガーとして、先ほど作成したトリガーを設定します。

Googleタグマネージャのトリガーの設定

タグを保存してひとまず準備完了です!

プレビューモード

これは前回の記事で説明したので、詳しくは説明しません。

が! 確認してみるとこんな感じに表示されます。

Googleタグマネージャのプレビュー内容詳細

値が取れているかどうか分かりやすい!

まとめ

この前はリリース前のバタバタの中で設定などをおこないましたが、LIGブログに執筆するために改めて勉強しました。

勉強すればするほど、Googleタグマネージャ……めっちゃ便利やん! って気付きました。

わたしのようなディレクターやデザイナーなど、タグを直接触ることのできない人にとっては本当に便利なので、クライアント様にもGoogleアナリティクスのタグの埋め込みではなく、Googleタグマネージャでの管理をオススメしていきたいと考えています!

では!

なっちゃん
この記事を書いた人
なっちゃん

ディレクター

おすすめ記事

Recommended by