Google Tag Manager

GTMでiframe内のクリックイベントを取得したい

こんにちは。エクスチュアの岩川です。

GTMでクリックイベントを取得しようとしているのにClickがSummaryに出てこない(反応しない)なんてことありませんか?

※Summaryって何?という方やSummaryの確認の仕方がわからないという方は以下の記事をどうぞ

その原因のひとつとして可能性があるのがiframeです。

現に弊社への相談も多い内容のひとつであり、今回はそんなiframeとGTMの関係について説明していこうと思います。

■iframeの使用例となぜ計測できないか

iframeとは様々な利用のされ方がありますが、この問題が発生するほとんどの場合、webページ内に別のwebページが存在するような一画面にwebページが複数存在する場合のことを指します。

今回はケースとして多い、Webページ内にフォームが設置されているページを例にします。

動きとしては以下のような感じです。※今回はClickベースで説明していきます

この場合フォーム部分にiframeが存在し、アクセスしているURLはhttp://XXXXX.com(以下親要素)ですがそのページ上にあるhttp://YYYYY.com(以下子要素)というwebページを操作していることになっています。

図で表すとClickの影響範囲は以下の黄色部分です。

つまり親要素にただGTMを実装しただけではiframe内にあるフォームのデータは取得することができません。

■子要素でクリックイベントを取得する

ではどのようにすればいいのか、答えは意外と単純です。

子要素のWebページにもGTMを実装すれば良いのです。

ですがそのままではページビューが2件発生してしまうという問題が発生してしまいます。

これは2つのWebページに同時にアクセスしていることが原因で起こってしまいます。

加えてページビューが親要素・子要素それぞれで発生しておりますので別々のURLが2件同時に発生してしまっているということになります。

そのためページビューから子要素のドメイン(もしくはURL)を除外する必要があります。

以上で『ページビューは一度のみ』かつ『クリックイベントが取得ができる』ようになりました。

■計測上で問題になる場合とその対応

一旦ここで条件は満たせたのですが

取得されたクリックイベントの発生したのが子要素のURLであることが問題となるケースの話をしていきましょう。

レポートを見る際に親要素のURLフィルタに引っかからない、などが挙げられると思います。

それを解決するためには子要素をクリックした際に親要素上で発火したように見せることで解決できます。

子ページに以下のようなコードを実装します。

<script>
$(function() {
    $(document).on('click', '【子ページボタンの要素】', function() {
        $('body' ,parent.document).append("<script>gtag('event', '【イベント名】');<\/script>");
    });
});
</script>

これはparent.documentで親要素のページを操作するためのコードとなっており、指定したボタンをクリックした際に親要素にgtagイベントを書き込むことで親ページでイベントが発生したようにすることが可能になります。


いかがでしたか?

iframeは全くイベントが取得できないので躓きやすく、焦る事も多いですが意外と解決方法はシンプルです。

エクスチュアでは様々な企業様の基本的な悩みから高度な悩みまで丁寧にお手伝いいたします。

是非お気軽にお問合せください。

関連記事

  1. Google Tag Manager

    同一サイトにGTMを複数導入する危険性について

    こんにちは。エクスチュアの岩川です。今回は何度か質問をいただ…

  2. Adobe Analytics

    AdobeAnalytics: GTMのdataLayerをAdobeAnalyticsの処理ルール…

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  3. Google Analytics

    Google Analytics: ユニバーサルアナリティクスの拡張Eコマース用dataLayerを…

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  4. Google Analytics

    Cloud FunctionsとOpenWeather APIを使ってGoogle Analytic…

    こんにちは、エクスチュアの権泳東(權泳東/コン・ヨンドン)です。…

  5. Google Tag Manager

    GTMで任意のリンクをクリックしてn秒後トリガーを動作させる方法

    こんにちは、エクスチュアの岩川です。GTMで用意され…

  6. Google Cloud Platform

    Server-side GTMのAppEngine設定をカスタマイズする

    こんにちは、エクスチュアの権泳東(權泳東/コン・ヨンドン)です。…

最近の記事

  1. エクセルで「テーブル」を使うメリット① 「BIツールで使いや…
  2. GTMで複数のコンテナに同じ実装をしたい
  3. イベントレポート Qualtrics XM on tour …
  4. イベントレポート Qualtrics XM on tour …
  5. ObservePoint:2022年デジタル・ガバナンスレポ…
  1. Google Tag Manager

    GTMで複数のコンテナに同じ実装をしたい
  2. Tableau

    Tableau:抽出を含んだワークブックを10.4以下にダウングレードする
  3. Adobe Dynamic Tag Manager

    【Adobe Analytics,Launch】進化するDebugger
  4. KARTE

    KARTE 成果の出るアイデアを考える_ツールを活用できていないと感じたら
  5. Adobe Analytics

    Adobe Analytics: Datafeedのログからパスフローレポートを…
PAGE TOP