【2018年版】GTMのイベントトラッキングの考え方と図解

WEB広告を運用するサイトならば、なくてはならない存在となったタグマネージャー。

 

今回は、サイト上のボタンクリックや閲覧状況などのイベントを計測するのに便利な

GTM(Googleタグマネージャー)のイベントトラッキングのコツについて解説します。

 

 

特につまづきやすいのが、WEBサイトによって異なるHTML、CSSのサイト内構造に合わせ

どの要素を設定するのかという点です。

そのため、その部分を重点的に説明します。

◆設定の前提

Googleタグマネージャー(https://tagmanager.google.com/#/home)へログインします。

ログインにはGoogleアカウントが必要となります。

 

ウェブサイトごとに、Googleタグマネージャー内で『アカウント』を作成。

そのアカウント内に『コンテナ』と呼ばれる作業場をつくることからはじまります。

 

構造やUIとしては、Googleアナリティクスによく似ています。

 

◆GTMの役割

サイト上の動作を、使いやすい形に変換して、Googleアナリティクスなどの各種統計ツールやPowerBIなどのBIツールへ吐き出していくことだと、私は考えています。

 

『ハコ』=変換用のブラックボックスだと考えてみると分かりやすいです。

 

 

そして、このハコの中の設定をいろいろと調整することとなります。

 

◆タグとトリガーの役割

GTMは、どのトリガーで、どのタグが反応するかを設定すること、ここに尽きます。

このタグとトリガーを

  1. 入稿
  2. 結びつける(上図の赤線)

の2種の作業で設定作業は完了です。

 

下記が、コンテナ上の画面です。

管理画面上では、上記の黄色の部分から、タグとトリガーそれぞれの『要素』を入稿していくこととなります。

 

以下では、弊社のサイトをもとに説明していきます。

◆図解 事例で説明します 

◆与件

・サイト:媒体資料あつめました(http://baitaishiryo.com/) 弊社運用のいろんな広告媒体を集めたサイトです

・取りたい指標:ボタンのクリック とします

・計測したいボタン:トップページの下部に存在する [もっと媒体資料を見る] 黄色の丸部分

・やりたいこと、ゴール:このボタンクリックを、Googleアナリティクス上に表示させて分析したい

このボタンをクリックした際、ページは遷移しないサイトのため、

通常の、CVページにタグを埋め込む方法などは使用できません。

 

そこで、今回、Googleタグマネージャーを使用することにしました。

 

◆ページ上で設定するボタンなどの構造の名前を確認する

トリガーを定義・設定する、つまり、このWEBサイト上でのボタンの場所を定義して、それがクリックされたというものをトリガーとして設定します。

 

ボタンの場所を定義するには、

HTML上のID属性、もしくはclass属性を利用することが一般的です。

 

そこで、ページのソースを確認して、何が定義上適しているのか確認します。

 

WEBブラウザ上でページを[右クリック]➡[ページソースの表示]で該当の部分を検索して見つける方法も一つですが、

サイト構造が複雑なものだと一苦労です。

 

 

そのため、今回は

Google Chromeの『デベロッパーツール』を利用して進めてみます。

 

◆ディベロッパーツール

ディベロッパーツールとはchromeブラウザで特有の機能です。

[設定]➡[その他のツール]➡[ディベロッパーツール]で開けます。

ショートカットキーはF12です。(Windowsの場合)

 

該当のサイトで開くと、右側に、サイトのコード(htmlとCSS構造)が出てきます。

 

ここで赤丸で囲んだ部分をクリックします。ここで『選択モード』となります。

その後、コード内容が知りたい箇所(今回であれば『もっと媒体資料を見る』のボタン)へカーソルを持っていくと

自動的に、右側の画面に、該当箇所のコード部分がわかるようになっています。

 

今回、知りたいコード部分を拡大します。

class=”wmle_loadmore_btn”

と記載があります。

これがこのボタンの名前です。

 

これを利用して、トリガーの定義を行います。

 

ここで注意点です。

Classは構造部分の名前を指し示し、IDは固有のものを指し示すために使われることが多いです。

そのため、同じようなボタンが同じClass名であることがあります。

IDは、それぞれ『btn_1』、『btn_2』などとユニーク(固有)の値でコーディングされているのが一般的です。

 

結果、見つけたclass名が他の構造物と被らないか確認する必要があります。

 

該当したClass名の部分(今回は”wmle_loadmore_btn”の部分)をコピー&ペーストし

右側のディベロッパーツールの画面上で、[ctrl]+[F]で検索窓を出し、検索することで確認できます。

 

◆トリガーをGTMの管理画面で設定する

ここでGTMの管理画面へ戻ります。

 

[トリガー]

[新規]

[トリガーの設定]

まで進めます。

 

ここで、トリガーのタイプの一覧が現れるので、

『クリック すべての要素』を選択します。

 

ちなみに、『クリック すべての要素』とありますが、

リンクへ飛ぶクリックは含まれません。

 

何らかのページ遷移のボタンを取りたい場合ば、『クリック リンクのみ』を選択する必要があります。

 

●[一部のクリック]

[click classes]を選択

[含む]を選択

空欄に該当のコードを入力

[保存]

で完了です。

 

[含む]の選択の際に、正規表現なども活用できるため

複雑な定義を設定したい場合には有効活用できます。

 

◆タグを設定する

次にタグを設定します。

今回、このボタンクリックを、Googleアナリティクス上で計測・分析したいと考えています。

 

そこで、先ほどのトリガーと同様の形でGTM上の設定を進めていきます。

GTMの管理画面にて

[タグ]

[タグの設定]

[タグタイプの選択]にて『ユニバーサルアナリティクス』

を選択します。

 

すると下記のような『タグの設定』画面へと遷移します。

 

[トラッキングタイプ] ➡ 『イベント』

…今回はクリック計測のため、『イベント』を選択します。

 

次に

[カテゴリ]

[アクション]

[ラベル]

の項目があります。

これは、Googleアナリティクスのイベント設定と連携しており、上から順に上位概念となっております。

Googleアナリティクスでは、[行動]タブ➡[イベント]画面で、詳細の確認をすることが可能です。

ここでイベントの種類分けが可能です。

今回は他に測る指標がなく種類分けをする必要がないため、一旦『カテゴリ』に『画面遷移ボタン』と任意の名前を設定します。

[値]

Googleアナリティクスに、何らかの値を付与したい場合、

例えば、1クリックに100円の価値があるなら、”100”などと設定します。今回は空白で大丈夫です。

 

非インタラクションヒット

基本的には初期設定の『偽』(false)の設定のままで大丈夫です。

 

これはGoogleアナリティクス上で、『直帰率』を測る際に使用される設定です。

 

『偽』(false)のままにしておけば、

今回計測する行動をとった際に、その行動をとったユーザーは『何らかの行動をした』➡『直帰とみなさない』という形で、

直帰ユーザーとして計測しないようになります。

Google アナリティクス設定

複雑な変数の設定の際に使用します。今回は使用しません。

□ 

オーバーライドとは『上書き』を意味します。

Googleアナリティクス変数を使用しないならば、基本的に上書きで大丈夫です。

チェックを入れ、GAのトラッキングIDを入力します。

詳しくは、Google公式のコミュニティの参照記事をご確認ください。

 

◆タグとトリガーを結びつける

先ほどのGoogleアナリティクスタグの設定画面の下部に、

トリガーの設定テーブルが出現しています。

 

ここをクリックして、先ほど作成してトリガーを選択して作業は完了となります。

 

今回はタグ側の画面から、トリガーへの結び付けを行いましたが、

逆にトリガー側の画面から、タグへの結び付けも同様の方法で可能となっています。

 

◆実際の動作を確認する(GTMのプレビューモード)

最後に、実際設定したタグとトリガーがうまく反応しているのか確認を行います。

ここで、GTMのプレビューモードを活用します。

GTMが一番便利な部分は、このプレビューモードといっても過言ではありません。

 

右上の[プレビュー]ボタンをクリックするだけで、プレビューモードが発動します。

この状態で、別タブを開き設定したサイトを訪れると、下部に、各種タグがどのトリガーで反応しているのか確認できるウィンドウが出現します。

 

左側に番号順で並んでいるのが、『ページ上の動作で実際に発動したトリガー』になります。

ここで、確認したいトリガーをクリックすると、

右側に

『Tags Fired On This Event』(発火しているタグ)

『Tags Not Fires On This Event』(発火していないタグ)

が表示されます。

 

ここで右側の、タグのハコをクリックすると、

そのタグがどんな要素をもっているのか、またタグのどの要素の部分が反応して、また反応していないのか確認することができます。

 

また、選択したトリガーの種類によりますが

どんな値をもって、どんな値を吐き出しているのかを確認することができます。

 

 

まとめ

冒頭で図解したように、

GTMの基本は『トリガー』、『タグ』の2種を設定し、紐づけることに終着します。

この基本イメージを頭にもちながら作業を進めると比較的スムーズにできるかと思います。

 

今回は、シンプルなボタン計測におけるGTM設定活用を開設しましたが、

変数を活用することで、

大規模なサイトも法則に沿って、簡単に設定することができます。

 

また、

基本的なHTML、CSSの構造を理解していると格段にスピードが速くなります。

無料のコーティング学習のサイトは多々あるので、そこで2,3時間みっちり勉強することも大きな力になると思います。

 

以上、GTMのイベントトラッキングの考え方と図解でした。

 

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Facebookページ

アドイロのSNS


記事のアーカイブ

ページ上部へ戻る