iframe内にあるボタンを、親ページに設置したGoogle Analyticsで計測したい

前提・実現したいこと

iframe内にあるページ（以下、「子ページ」。親ページと同じドメインにあります）の
フォーム内の<button>のクリック数を
親ページのGoogleタグマネージャー(GTM)/Google Analytics(GA)で計測しようと試みています。

Google Analyticsで2重に集計しないようにするため、
子ページにはGTMのタグは設置しません。

Googleタグマネージャーについては、
ほぼ初めて利用しているため、どこが間違っているのか、合っているかもよくわからない状態です。

そもそもこのやり方、方向性自体が間違っているのかもしれないので、
コーディングを修正すればよいのか、まったく別の方法がありそうか、
ご教授いただけると幸いです。

該当のソースコード

親ページに記述したJS

・#iframeは、iframeのID
・#submitは、iframe内のボタンにつけたID
・親ページにて、ChromeのデベロッパツールのConsoleで、この「click」は表示されるので、
子ページからのデータを送ることはできているかもしれない。
・だが、GAではイベントの計測がされない。
・eventCategoryなどは、親ページにてテキストリンクで使っているものを流用しており、
そのテキストリンクでは計測はできている。

html
1<script>
2$(window).on("load", function(e){
3    $("#iframe").contents().find("#submit").on("click", function(e){
4        console.log("click");
5        ga('send', { 
6            hitType: 'event',
7            eventCategory: 'CATEGORY',
8            eventAction: 'ACTION',
9            eventLabel: 'LABEL',
10            eventValue: 1
11            });
12    });
13});
14</script>

子ページに記述したJSとボタン

HTML
1<button type="button" class="ga_clikEvnt_count" id="submit">検索する</button>

※子ページにGTMタグを設置した場合は、
このボタンをクリックしたときにイベントとして計測できることは確認済み。
子ページにGTMタグを設置せずに、親ページのGTMタグで計測したい。

試したこと

・iframeの代わりにインクルードファイルやJSで読み込むことを試したが、
子ページにあるJSと親ページのJSでコンフリクトが起こるため断念。
（それぞれのJSが別会社が作ったモジュールのため改造するのが困難）

https://2m3g1.com/4599.html
こちらも参考にしてみましたが、計測できず。

行動規範の内容に同意します

回答1件

ベストアンサー

質問者様、調べましたが
本来は「Google Analytics」でのイベントをカスタマイズする事でしか対応できません
できればHPの状態等で確認できれば良いのですが今回は難しい
ただ「console.log("click");」ができているのであれば
別の案を提示させていただきます。

HTML
1<input type="button" id="dummy" style="display:none;">

親画面側にダミーのボタンを設置し「Google Analytics」でclickを検知できるようにする。
（非表示なので押される事もレイアウトに影響が出る事も無い）

javascript
1$(window).on("load", function(e){
2    $("#iframe").contents().find("#submit").on("click", function(e){
3        document.getElementById('dummy').onclick();  // ダミーボタンをクリック
4    });
5});

子画面のボタンが押された時親画面のダミーボタンをクリックする。

追記

javascript
1var dummy;
2$(window).on("load", function(e){
3    dummy = document.getElementById('dummy');
4    $("#iframe").contents().find("#submit").on("click", function(e){
5        dummy.click();  // ダミーボタンをクリック
6    });
7});

投稿2020/10/09 09:39

編集2020/10/12 07:38

kuma_kuma_

総合スコア2506

kmkmkmpmpmpm

2020/10/12 05:40

ご回答ありがとうございました。試させていただきました。子ウィンドウのボタンをクリックして、ダミーボタンをクリックさせるということができないようでした。子ウィンドウのボタンをクリックしたときに、ダミーボタン上のテキストを変更することは可能だったので、アクションを起こさせるようなことができないのかもしれません。もう少し調べさせていただきます。