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

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

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

  2. Google Analytics

    Google Analytics StandardのデータをBigQueryで分析するための力技

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

  3. Google Tag Manager

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

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

  4. Google Analytics

    【GA4】DebugViewの使い方

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

  5. Google Analytics

    Google Tag Manager上でGoogle AnalyticsのclientIDを取得する…

    この情報は2018年4月当時の情報です。こんにちは、エクスチュ…

  6. Google Tag Manager

    GTMの検証でプレビューのSummaryを上手く使う

    こんにちは、エクスチュアの岩川です。GTMを使用してタグを実…

カテゴリ
最近の記事
  1. dbt Projects on SnowflakeをTASK…
  2. AWS発のAIエージェントIDE「Kiro」を使用した仕様駆…
  3. AWS発のAIエージェントIDE「Kiro」を使用した仕様駆…
  4. TableauとSnowflakeを接続する方法
  5. 【dbts25】Snowflake×PostgreSQLのニ…
  1. Amazon Web Services

    Amazon Redshift ビルド168まとめ
  2. Segment

    Segmentでデータ管理を一元化する
  3. Google Cloud Platform

    【GCP】Cloud Workflowsでデータパイプラインの構築を試してみた②…
  4. ChatGPT

    LangChainのソースコードから実装を見てみる(ChatModelのinvo…
  5. IT用語集

    ビッグクエリ(Big Query)って何?
PAGE TOP