Facebook 像素自定义尺寸仅出现在第一次网页浏览中
Facebook Pixel Custom Dimensions Only Appearing on First Pageview
我们有一个单页 Angular 应用程序,其中包含通过 GTM 注入的 Facebook 像素。在第一次注入中,我们传递以下内容:
<script>
!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', '<OUR ID>'); // Insert your pixel ID here.
</script>
请注意,没有网页浏览事件。然后,我们将一个自定义 "virtual pageview" 事件推送到 GTM 数据层,该事件导致一个标签将综合浏览量发送到 Google Analytics(工作正常),并触发以下代码的注入:
<script>
fbq('track', 'PageView', {
dim1:{{dim 1 macro}},
dim2:{{dim 2 macro}},
dim3:{{dim 2 macro}}
});
</script>
在每次网页浏览中,上面的 fbq 都附加到 DOM 并填充了适当的尺寸(通过查看页面的源代码)。
在第一个访问 Facebook 的网页浏览中,尺寸出现在调用中(通过查看网络选项卡),但在随后的网页浏览中,一个点击被发送到 Facebook,但没有发送任何尺寸,即使它们存在于附加到 DOM.
的代码中
在大多数情况下,这些维度不会因点击而改变,但会根据用户在整个会话期间执行的操作而改变。
关于为什么后续点击不包含自定义尺寸的任何想法?
您尝试在 Angular 应用程序中每次发生历史更改时更新有效载荷并使用更新后的有效载荷再次执行 fb 代码?
我会在你的前端实现一个数据层:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'virtualPageView',
pagePath: '/newPath', //update this path from your angular route,
//or use GTMs built in history-change trigger
//and a variable that gets the URL fragment
//to update your pageview's path variable.
customDimenson1: 'value1',
customDimenson2: 'value2',
customDimenson3: 'value3'
});
</script>
创建类型为自定义事件 的触发器,名称为virtualPageView。
为 pagePath、customDimension1-3 创建 Data Layer Variable 类型的 4 个变量。
创建包含您的 fbq 事件的自定义 HTML 标签:
<script>
fbq('track', 'PageView', {
dim1:{{customDimenson1}},
dim2:{{customDimenson2}},
dim3:{{customDimenson3}}
});
</script>
创建另一个在内置触发器 所有页面 上触发的自定义 HTML 标记,因为它只需要为您的单页应用程序执行一次,使用您的基本代码:
<script>
!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', '<OUR ID>'); // Insert your pixel ID here.
</script>
我在更新变量的 SPA 方面遇到了问题。有时是竞争条件,有时是 GTM 或您的代码中的错误。您也可以尝试使用 100 毫秒计时器来延迟执行(糟糕的建议)。
收到Facebook官方团队的反馈,看来这是设计使然。在使用 Pageview 事件进行的任何后续调用中,不会在有效负载中发送任何自定义数据。
我们有一个单页 Angular 应用程序,其中包含通过 GTM 注入的 Facebook 像素。在第一次注入中,我们传递以下内容:
<script>
!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', '<OUR ID>'); // Insert your pixel ID here.
</script>
请注意,没有网页浏览事件。然后,我们将一个自定义 "virtual pageview" 事件推送到 GTM 数据层,该事件导致一个标签将综合浏览量发送到 Google Analytics(工作正常),并触发以下代码的注入:
<script>
fbq('track', 'PageView', {
dim1:{{dim 1 macro}},
dim2:{{dim 2 macro}},
dim3:{{dim 2 macro}}
});
</script>
在每次网页浏览中,上面的 fbq 都附加到 DOM 并填充了适当的尺寸(通过查看页面的源代码)。
在第一个访问 Facebook 的网页浏览中,尺寸出现在调用中(通过查看网络选项卡),但在随后的网页浏览中,一个点击被发送到 Facebook,但没有发送任何尺寸,即使它们存在于附加到 DOM.
的代码中在大多数情况下,这些维度不会因点击而改变,但会根据用户在整个会话期间执行的操作而改变。
关于为什么后续点击不包含自定义尺寸的任何想法?
您尝试在 Angular 应用程序中每次发生历史更改时更新有效载荷并使用更新后的有效载荷再次执行 fb 代码?
我会在你的前端实现一个数据层:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'virtualPageView',
pagePath: '/newPath', //update this path from your angular route,
//or use GTMs built in history-change trigger
//and a variable that gets the URL fragment
//to update your pageview's path variable.
customDimenson1: 'value1',
customDimenson2: 'value2',
customDimenson3: 'value3'
});
</script>
创建类型为自定义事件 的触发器,名称为virtualPageView。 为 pagePath、customDimension1-3 创建 Data Layer Variable 类型的 4 个变量。 创建包含您的 fbq 事件的自定义 HTML 标签:
<script>
fbq('track', 'PageView', {
dim1:{{customDimenson1}},
dim2:{{customDimenson2}},
dim3:{{customDimenson3}}
});
</script>
创建另一个在内置触发器 所有页面 上触发的自定义 HTML 标记,因为它只需要为您的单页应用程序执行一次,使用您的基本代码:
<script>
!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', '<OUR ID>'); // Insert your pixel ID here.
</script>
我在更新变量的 SPA 方面遇到了问题。有时是竞争条件,有时是 GTM 或您的代码中的错误。您也可以尝试使用 100 毫秒计时器来延迟执行(糟糕的建议)。
收到Facebook官方团队的反馈,看来这是设计使然。在使用 Pageview 事件进行的任何后续调用中,不会在有效负载中发送任何自定义数据。