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. 最速で理解したい人のためのIT用語集

関連記事

  1. Google Cloud Platform

    Server-side GTM を Google AppEngine にデプロイする

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

  2. Google Analytics 4

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

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

  3. Adobe Analytics

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

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

  4. Google Cloud Platform

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

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

  5. Adobe Analytics

    GTMのdataLayerをAdobeAnalyticsの「s」オブジェクトにコピーする

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

  6. Google Tag Manager

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

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

最近の記事

  1. LangChainって何?: 次世代AIアプリケーション構築…
  2. 回帰分析はかく語りき Part1 単回帰分析
  3. GitHub ActionsでGCEへのデプロイを楽にしてみ…
  4. Snowflake の Copilot が優秀すぎる件につい…
  5. Snowflake の新しいData Clean Roomの…
  1. GA 360 Suite

    Google Analytics 360 + BigQueryでよく使うSQL例…
  2. IT用語集

    OS(Operating System)って何?
  3. Google Apps Script(GAS)

    GoogleスプレッドシートのデータをGASで整理する【getRange編】
  4. Google Analytics

    Google Analyticsのセグメント機能について②
  5. DBエンジニアが学ぶSnowflake

    【DBエンジニアが学ぶSnowflake】①Snowflakeを語りたい!
PAGE TOP