如何在单页应用程序中使用Facebook Pixel跟踪浏览量

已更新：2020年4月6日。 这里’这种情况可能会让您看起来很熟悉。您登陆自己的网站，并触发了Facebook Pixel标签。您继续浏览该网站，该像素再也不会触发（除非您点击了 刷新 按钮）。

你什么’这里涉及的称为单页应用程序和Web跟踪工具（包括GTM）’不能像您期望的那样表现。

在本指南中，我’将向您展示如何在单页应用程序/网站中使用Facebook Pixel跟踪页面浏览量。

 

 

什么是单页应用程序（SPA）/网站？

根据谷歌，单页应用程序（SPA）是一个Web应用程序或网站，它会在首次加载页面时加载浏览整个站点所需的所有资源。当用户单击链接并与页面交互时，后续内容将动态加载（即使页面看上去可能有所不同，技术上也不会重新加载页面）。

通常的Facebook Pixel跟踪在传统网站上效果很好，因为该代码段代码是在用户每次加载新页面时运行的。

但是，在单页网站/应用程序中，所有必需的代码都会被加载一次，并且在整个用户会话期间不会重新加载页面。当您继续浏览网站或Web应用程序时，内容将动态加载。 这就是为什么您的Facebook Pixel浏览量仅触发一次的原因URL可能会更改，但这只是为了感知单独的页面。

幸运的是，一切皆有可能，您也可以使用GTM跟踪此类浏览量。继续阅读，我将向您展示如何进行。

 

要求

为了充分利用本指南，您应该已经熟悉 一般如何跟踪单页应用程序.

至于Facebook Pixel，我强烈建议您使用GTM的“自定义FB Pixel”模板（如 在这里描述）。如果您已通过“自定义HTML”标记实现了Facebook Pixel，请确保进行以下设置：

您已将主要的FB像素代码分为两部分，并将其保存为两个单独的标签：

• FB像素基本代码（无 fbq（‘track’, ‘PageView’);）。将此标签设置为火 每页一次。唐’向其添加任何触发器。保存。您还可以删除与<noscript>（无论如何都无法正常工作）。
  
• 被包围的Facebook Pixel浏览量命令<script>标签。将此标签设置为在 所有页面。而在 标签排序 部分，请确保将Facebook Pixel基本标记设置为 设置标签.
  

请记住：如果通过自定义HTML标签使用FB像素，则必须执行上述两个步骤。 如果您已实现FB Pixel自定义模板，则无需’不需要任何其他配置。

 

标签

阅读完之后 重要 在此博客文章的“部分”中，您应该已经具有以下任一条件：

• 一个综合浏览量代码（通过自定义模板实现）
• 或两个自定义HTML标签，基本代码和Pageview命令

跟踪其余的综合浏览量（又名 虚拟浏览量），我们将使用相同的标签。

 

触发

目前，您的Facebook Pixel仅在 页面浏览量 预览模式下的事件。那’s，因为您正在使用 所有页面 触发。

在单页应用程序中，我们还需要另一个触发器来跟踪页面URL何时动态更改。每次发生这种情况时，我们’再次触发Facebook Pixel Pageview。

我有 非常详尽的指南Â解释了如何决定为您的设置选择哪个触发器（因为存在许多细微差别）。所以，如果你没有’到目前为止，我强烈建议您这样做。

长话短说，您有两个主要选择：

• 历史记录更改触发器
• 如果这不起作用，则应 与开发人员一起’s help &自定义事件触发器

让’想象一下，对我来说，“历史记录更改”触发器有效。

创建一个在所有“历史记录更改”事件上触发的触发器。

保存触发器，启用 GTM预览模式，请刷新您的网站，然后尝试逐页导航。你应该看到 历史沿革 每次您转到另一个页面时发生的事件。如果看到多个 历史沿革 每个网页浏览量的事件， 读这个.

如果你不这样做’t see any 历史沿革 预览模式下的事件，则需要 毕竟与开发者合作.

 

将触发器添加到标签

将您在上一章中创建的触发器添加到Facebook Pixel标签中。

如果您使用的是Facebook Pixel自定义模板，只需将触发器添加到您的Pageview标签中。如果您使用的是“自定义HTML”标记，请将触发器设置为仅包含 fbq（‘track’, ‘PageView’); 命令。

确保您没有开火 FB基本代码 在同一页面上多次（这将导致错误）。

每次有Facebook Pixel 页面预览 被跟踪，它将捕获页面的当前URL（即使它包含＃（URL片段））。所以，你不’无需进行任何其他配置（与Google Analytics（分析）不同）。

 

让’s test

现在，该确保您正确实施了所有内容。

GTM预览和调试模式。  在GTM中，启用 预览和调试模式，然后刷新要使用Google跟踪代码管理器安装Facebook Pixel的页面。

在屏幕底部，将显示一个调试控制台。点击“网页浏览”事件，您应该看到Facebook Pixel标记已被触发。

然后继续浏览您的网站。根据您的设置，您将看到 历史 或类似的东西 virtualPageview 预览模式下的事件。单击它们，检查您的FB Pixel页面视图标记是否正在触发。

 

Facebook Pixel助手。 前面的提示并不意味着所有内容都已正确发送到Facebook Pixel！还有其他地方需要检查。其中之一是 Facebook Pixel助手。安装它，您将看到此图标出现在Chrome浏览器的右上角。刷新页面后，如果在页面上实现了Facebook Pixel，则其颜色将变为蓝色，并且您会在该图标中看到一个数字。

单击该图标，然后进行检查。我们看到已跟踪PageView，并且它旁边有一个绿色的选中标记图标。很好！如果有装载程序或黄色图标，则表示可能存在问题。但是，绿色图标正是我们想要的。

如果您在同一页面上跟踪了多个综合浏览量，则会将它们全部视为单独​​的 页面预览 FB Pixel Helper中的事件。

 

Facebook像素报告

在Facebook业务管理器中，转到 活动经理> Data Sources >选择您的像素，然后选择 测试事件.

输入您网站的网址（如果我正在使用自己的网站，则输入 //www.toddblog.net），然后点击打开网站。重定向到您自己的网站后，请返回到 测试事件像素，并检查您是否看到了来自您自己设备的网页浏览量。如果没有任何显示，请返回您的站点并再次刷新页面。

如果一切正常，则意味着您已在单页应用程序中正确实现了Facebook Pixel。

 

进一步了解如何使用GTM实施Facebook Pixel

如果您想了解有关Facebook Pixel + GTM的更多信息，并确保所有设置均正确，请在下面输入您的电子邮件地址，然后下载我的Google Tag Manager Facebook Pixel备忘单。

 

 

 

在单页应用程序/网站中使用Facebook Pixel跟踪页面浏览量：最后的话

在这份相当快速的指南中，您了解了为了开始跟踪单页应用程序/网站中出现的所有页面视图，需要执行哪些必要步骤。

为此，您不仅需要在初始网页浏览量上触发FB Pixel页面浏览量标签（所有页面 触发），也可以在随后的虚拟综合浏览量中使用。自定义事件触发器或历史记录更改触发器非常适合该任务。

如果您曾经在Google Analytics（分析）中进行过单页应用程序跟踪，那么您可能已经意识到 ＃（URL片段）问题。幸运的是，Facebook Pixel也自动跟踪URL的编号，因此您不必’无需在此处进行任何其他配置。