如何在网络应用中实现对客户的 GA4 容器和元像素代码的支持?



我正在开发一个web应用程序,该应用程序作为多个客户端的iframe。我有兴趣将Google Analytics 4和Facebook/Meta Pixel分析标签添加到页面中(如果可能的话,通过Google Tag Manager(,以便客户可以接收数据,因为客户一直在要求这样做。

我知道我可以通过GTM将这种集成添加到网站,方法是创建一个GTM帐户,为网站创建一个容器,将提供的GTM脚本和iframe分别添加到头部和主体,并将GA4和Pixel作为标签添加到我的GTM帐户。但是,这只会为本人提供页面使用数据。我也可以在网站上添加客户的GA4和Pixel标签,但只有一个客户会收到数据。我希望能够动态地将GA4和Pixel数据发送给当前正在向最终用户显示应用程序的任何客户。

我已经看到有一种方法可以通过GTM授予对您的GTM帐户或特定容器的访问权限,但这样做会为一个客户提供与web应用程序相关的所有数据,而不仅仅是他们对该应用程序的实现。如果只有一个客户在使用该网站,则此解决方案会起作用,但当它提供给任何将iframe添加到其网站的人时,则不会起作用。

Meta/Facebook提供的Pixel标签将包含在标题中:

<!-- Meta Pixel Code -->
<script th:unless="${pixelID == ''}">
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', pixelID);
fbq('track', 'PageView');
</script>
<noscript th:unless="${pixelID}">
<img height="1" width="1" style="display:none"
th:src="${'https://www.facebook.com/tr?id=' + pixelID + '&ev=PageView&noscript=1'}"/>
</noscript>
<!-- End Meta Pixel Code -->

解决这个问题是否像用存储的客户ID值替换Pixel ID pixelID(在GA4的情况下是谷歌分析容器ID(一样简单?

如果有什么我可以帮助澄清的情况或我的问题,请告诉我谢谢

编辑——对于那些正在寻找解决方案的人,我在这里找到了一篇很棒的博客文章,详细介绍了如何实现顶部评论中讨论的事件转发。

您通常不会使用GTM。虽然实现用户GTM是一种选择,但它不是一个好的选择。供应商方面的工作太多了,但它也不必要地将客户端的跟踪逻辑分解为多个容器,使调试和实现变得更加困难,也不那么明显。拥有一个iframed GTM还有其他问题。比如如果你不小心的话,可能会对页面浏览量进行双重跟踪等等

iframed供应商可以为其父窗口客户端(以及行业标准(提供的最佳支持是向父窗口推送窗口消息。所有类型的消息,指示用户在iframe中执行的所有操作,指示所有页面更改(如果有(,指示转换和流放弃(如果适用(。

然后,用窗口监听器的例子来记录它,这些监听器可以捕获这些事件并将它们重新转换为适当的dataLayer推送。这将是非常周到的。

如果你想更进一步,你可以用容器导出制作一个git-reo,它将有一个用于部署监听器的标签,以及用于伪跟踪所有可能的iframe交互的变量触发器和测试标签。

最新更新