SEOノウハウ・副業ブログ・ワードプレス

Googleタグマネージャー(GTM)でクリックイベントが発火しない時の確認方法【プレビューを使ってチェック】

2022年3月11日

疑問

Googleタグマネージャー(GTM)でを設定したけどうまく発火しない。どこが悪いのかよくわからない。

Googleタグマネージャー(GTM)で設定したクリックイベントが発火しない場合、プレビューでエラーを確認しましょう。

プレビューを使った発火の確認方法を紹介します。

GTMでクリックイベントが発火しない時にプレビューで確認する方法

Googleタグマネージャー(GTM)のクリックイベントがうまく発火しない場合、プレビューで原因をチェックできます。

例として、以下の内容でクリックイベントを設定した場合を紹介します。

設定したクリックイベントは、リンクがクリックされると「data-link-click」が設定してあるリンクだけ、Googleアナリティクスで集計されていくイメージです。

aタグには下記のようにdata属性の「data-link-click」を設定し、値はユニークになるように設定しました。

<a data-link-click="click01" href="https://example.com/xxxxx.php?aaa=123456" rel="noopener" target="_blank">あいうえお</a>

GTMの設定内容は下記のとおりです。

変数の設定 変数の名前は「クリックイベント」

  • 【変数のタイプ】自動イベント変数
  • 【属性名】data-link-click
トリガーの設定 トリガーの名前は「クリックイベント」

  • 【トリガーのタイプ】クリック―リンクのみ
  • 【このトリガーの発生場所】一部のリンククリック
  • 【イベント発生時の条件】Click Element/CSSセレクタに一致する/data-link-click
タグの設定 タグの名前は「クリック01」

  • 【タグの種類】Googleアナリティクス:ユニバーサル アナリティクス
  • 【トラッキング タイプ】イベント
  • 【カテゴリー】リンククリック(※任意の文字)
  • 【アクション】{{Page URL}}(※任意の文字)
    ※この場合はページURLが表示される
  • 【アクション】{{クリックイベント}}(※任意の文字)
    ※この場合は変数で設定した「クリックイベント(data-link-click)」の値が表示される

上記の設定をプレビューで確認していきます。

プレビューを起動する

「プレビュー」をクリック。

プレビューするために「URL」を入力して「Connect」をクリック。

タグが正常に動くかどうかを確認する

ポップアップ画面に入力した「URL」のページが表示されます。

プレビューが正常に表示できれば、右下のボックスに「Tag Assistant Connected」と表示されます。

次に実際にクリックイベントを設定したaタグ(data-link-clickを設定したリンク)をクリックします。

Tag Assistantの画面(URLが表示されているポップアップ画面とは別画面※下画像)に実行した処理が表示されます。

左側に実行した処理の順番が表示され、右側にその処理で実行されたGTMのタグが表示されます。

「Tags Fired」のところにタグがあれば、発火したことを意味し、「Tags Not Fired」のところに表示されていれば、発火しなかったことを意味します。

aタグをクリックすると、左側の処理の一覧に「Link Click」と表示されます。

表示された「Link Click」をクリックすると、右側にタグの発火結果が表示されます。

この場合(下画像)は、「Tags Fired」が「None」となっているので、どのタグも発火しなかったことになります。

クリックイベントとして「クリック01」をタグ設定したのですが「Tags Not Fired」の方にあります。

発火しなかった原因を調べるために「クリック01」をクリックします。

詳細画面右上の「Values」をクリックして選択すると発火しない内容の詳細を確認できます。

「✕」となっている部分が処理されなかった原因です。

これから分かることが下記の2つです。

発火しない原因

  • 「クリックイベントトリガー」が失敗している
  • イベント発生時の条件でエラーになっている(Click Element/CSSセレクタに一致する/data-link-click)

「Click Element」と「data-link-click」がマッチしていないのが原因のようです。

メモ

赤枠で囲った左側の長い文字が「Click Element」の内容です。どう見ても「data-link-click」とは一致しません。

発火しない場所を修正する

プレビューでエラーとなっている箇所が分かったので「クリックイベントトリガー」の編集に戻って、「イベント発生時の条件」を変更します。

変更前 変更後
イベント発生時の条件
  • Click Element
  • CSSセレクタに一致する
  • data-link-click
  • PageURL
  • 含む
  • seo-tool-compass
イベント発生時の条件の意味 Click Elementのセレクタとdata-link-clickが一致したら、クリックイベントを取得する ページURLに「seo-tool-compass」を含む場合に、クリックイベントを取得する

条件は、自分で考えて変更する必要がありますが、まずは条件を広げて発火できる状態を確認してみましょう。

今回の「変更後」の条件では、ページでクリックされれば発火するので、かなり条件を広げています。

プレビューを再実行して確認する

修正したら、再度プレビューを表示させてリンクをクリックします。

Tag Assistant画面に「Link Click」と表示されるので、それをクリックして発火結果を表示します。

右側に表示された結果から、今度は「Tags Fired」に「クリック01」が表示されたので、タグが発火したのが分かります。

タグをクリックすると「✕」マークが消えて正常に発火しました。

Googleアナリティクス(ユニバーサル)の「行動」>「イベント」でもクリックイベントを確認できます。

ただし、変更後の条件だと「目次」をクリックした場合もクリックイベントとして収集されてしまうので、さらに絞り込みの条件を追加します。

例えば、トリガーの編集で「Click URL/含む/example.com」という条件を追加します。

Click URLが表示されない場合は設定で追加する。

これは、aタグのリンク先に「example.com」という文字を含んでいれば、クリックイベントとしてカウントするという意味です。

この条件を追加すれば、目次のクリックは計測されません(目次は内部リンクなのでexample.comという文字は含んでいません)。

このように、いろいろな条件を指定すれば、絞り込むことができます。

トリガーの条件に「Click URL」がない場合

トリガーの条件を設定する時に、「イベント発生時の条件」に「Click URL」が表示されない場合は、変数の設定で追加が必要です。

「変数」を選択して、「設定」をクリックします。

組み込み変数の設定にある「クリック」の項目をチェックします。

変数名 変数の内容
Click Element ページ内で使っているタグを指定する時に使う
Click Classes クリックした時(aタグなど)のCSSのクラスを指定する時に使う
Click ID クリックした時(aタグなど)のCSSのIDを指定する時に使う
Click Target クリックした時(aタグなど)のtargetを指定する時に使う(_blankなど)
Click URL クリックした時(aタグなど)のURLを指定する時に使う
Click Text クリックした時(aタグなど)のテキストを指定する時に使う

この他、組み込み変数の設定には「Page URL」、「Page Hostname」、「Page Path」などのページ関連の変数もあります。

【まとめ】Googleタグマネージャーで発火しない時のプレビューでの確認方法

Googleタグマネージャー(GTM)でクリックイベントが計測できない場合は、プレビューで確認しましょう。

Tag Assistant画面の「Tags Fired」と「Tags Not Fired」でタグの実行状況を確認できます。

発火しないタグは「Tags Not Fired」に表示されるので、そのタグをクリックして止まっている部分を確認します。

Googleタグマネージャー(GTM)でできること・メリット・使い方【GAを設定する方法を紹介】

疑問 Googleタグマネージャー(GTM)は何が便利なの? Googleタグマネージャー(GTM)は、いろいろな計測タグ(Googleアナリティクス、オプティマイズなど)を、何回もサイトに設定する必 ...

  • B!