为何嵌入iFrame中的GTAG/GA4无法追踪数据？

我需要追踪客户通过iFrame嵌入的网页小部件的点击数据，目前遇到的问题是：在iFrame子页面中导入了GTAG，但嵌入父网站后无法实现追踪，直接打开子页面时事件可正常统计。

场景示例 #

客户父网站嵌入代码 #

<!-- customer hosting "parent" website -->
<body>
...
  <iframe src="https://danieles_webwidget.com/button1.html">
...
</body>

我的iFrame子页面代码（https://danieles_webwidget.com/button1.html） #

<!-- "child" Button1 widget page at https://danieles_webwidget.com/button1.html-->

<head>
  <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
   <!-- End Google Tag Manager -->     
</head>

<body>
   <!-- render the button -->
   <button class="btn">
      Click me!
   </button>

    
   <!-- track analytics with custom events -->
    <script>
      jQuery('.btn').on("click", function()
        {
            window.dataLayer = window.dataLayer || [];
            var body = {'event'            : "button_clicked", 
                        'custom_event'     : "true", 
                        'custom_label'     : "bla bla bla"
                        };
            window.dataLayer.push(body);
            console.log("Done!"); // debug purpose
        }); 
    </script>
</body>

当前状态 #

• 按钮可正常显示，点击后控制台输出Done!，但Google Analytics中无统计数据
• 直接打开button1.html页面时，事件可正常追踪到GA4中

我的GTM配置 #

TAG #

configuration tag: GA4
event name: "button_clicked"
event params: "Custom Label" : {{custom_label}}

TRIGGERS #

type: custom event
event name: "button_clicked"
on: all events

已知限制 #

• 清楚此方式会丢失来源信息，但目前仅需追踪点击行为
• 了解可使用parent.postMessage()方案，但无法控制父网站，也不想让客户修改隐私政策，特此求助。

内容的提问来源于stack exchange，提问作者DeLac