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は全くイベントが取得できないので躓きやすく、焦る事も多いですが意外と解決方法はシンプルです。

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

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

Google Analytics 4:client_idを取得前のページ

【Tips】mouseflowで特定の流入経路からサイトを訪問した場合のみ計測させる方法次のページ

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. Google Tag Manager

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

    こんにちは。エクスチュアの岩川です。GTMで複数のコンテナに…

  2. Google Tag Manager

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

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

  3. Adobe Analytics

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

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

  4. Google Tag Manager

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

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

  5. Google Tag Manager

    【GA4/GTM】dataLayerを活用しよう

    はじめにこんにちは、エクスチュアの岩川です。GA4の…

  6. Google Analytics 4

    【GA4/GTM】dataLayerを使ってカスタムイベントを発生させてみよう

    はじめに以前の記事でdataLayerを使用し、GTMとのデ…

カテゴリ
最近の記事
  1. 【dbts25】Snowflake×PostgreSQLのニ…
  2. TROCCO dbt連携編
  3. KARTEの「フレックスエディタ(β)」登場!ノーコードでこ…
  4. dbt Projects on Snowflake使ってみた…
  5. Cortex Analystを使ってみた
  1. IT用語集

    クロスデバイス(Cross Device)って何?
  2. Data Clean Room

    Snowflake の新しいData Clean Roomの見どころを解説
  3. Python

    【完全版】MacでSeleniumを環境構築から実行まで 〜Python&…
  4. IT用語集

    プロキシ(Proxy)って何?
  5. Adobe Analytics

    次のページとは-Adobe Analyticsの指標説明
PAGE TOP