登录
  1. 所有收藏
  2. 跟踪设置
  3. Javascript 跟踪
  4. JavaScript页面浏览量跟踪
Image

JavaScript页面浏览量跟踪

如何使用FunnelFlux的浏览跟踪Javascript

Avatar

通过 Zeno

August 20, 2024

首先，请注意我们的全局代码片段已经包含了一个在全局代码片段执行后执行的页面浏览事件：

因此，如果您的目标仅仅是跟踪页面浏览，您不需要添加更多代码。

只需像往常一样在您的页面上包含我们的通用JS代码片段 -- 我们强烈建议在您控制的所有页面上都这样做。

手动跟踪浏览

您可以随时使用方法 flux.track("view") 发送页面浏览事件。

完整的，我们的Javascript浏览跟踪方法是：

flux.track("view", { 
  optional: 'arguments'
}, optionalCallbackFunction)

可选参数

可以在 flux.track 的第二个参数中发送额外的浏览和转化事件属性覆盖。它们必须在一个对象内。

跟踪属性

页面可能在我们的JS之前嵌入了 fluxDefaults，设置默认跟踪属性如页面ID、漏斗ID等。

此外，您可以直接将这些传入浏览事件代码。这里的值将覆盖任何JS默认值。

我们的跟踪API使用这些的优先级是：

事件级参数 > URL参数 > fluxDefaults对象

因此，推送到事件中的代码具有最高优先级。

可用的属性有：

  • p - 页面ID
  • f - 漏斗ID
  • n - 节点ID
  • ts - 流量来源ID
  • vid - 访客ID

请注意，我们会自动验证访客ID，所以推送不正确的值将导致它被忽略。

因此，您可以例如推送带有特定页面ID声明的浏览事件：

flux.track("view", { p: 'some_page_id' })

或者带有特定漏斗和节点ID：

flux.track("view", { 
  f: 'some_funnel_id', 
  n: 'some_node_id'
})

要解析的令牌

其次，您可以传递您希望我们的API返回的令牌，除了始终返回的默认值 {visitor}、{current-node-id} 和 {hit}。

令牌必须以名称resolveTokens传递，所有令牌都存在于一个数组中，令牌用大括号括起来，就像在FunnelFlux UI中使用的那样。

例如：

flux.track("view", { resolveTokens: ['{country-name}','{isp}','{browser}'] })

发送时，我们API的响应将包括这些项目。然后可以使用 flux.get() 方法访问它们，请参阅我们的文档这里。

如果使用这些令牌，我们建议使用回调函数或事件监听器，以便只在返回后处理和使用它们。

可选回调函数

浏览方法的第三个可选参数是回调函数。

flux.track("view", {}, callbackFunctionName)

如果在第二个参数中没有发送可选属性，您应该包含一个空对象 - 不要省略它。以下代码将不起作用：

flux.track("view", callbackFunctionName)

因为它将函数作为第二个参数而不是第三个参数发送。

这可以是您创建的任何函数，只要它在跟踪事件执行之前存在于您的代码中。当函数尚未定义时触发上述事件将导致浏览失败。

这个函数将在我们的事件监听器 fluxView 发生后立即被调用，所以从顺序的角度来看，两者实际上是等效的。使用最适合您的方式。

有关可用事件监听器的信息，请参阅我们的其他方法/函数文档。

使用Google Tag Manager

如果使用Google Tag Manager，我们建议以下做法：

  1. 创建一个名为Universal FunnelFlux Pro JS或类似的标签。将其优先级设置为10
  2. 在通用JS代码片段中，找到 lumetricv2.min.js 的源路径引用，并将其修改为 lumetricv2gtm.min.js -- 我们创建了一个单独的JS文件，删除了一些部分以防止GTM对某些辅助函数不满意
  3. 为flux.track浏览和转化事件创建单独的标签，并相应地触发它们。无需强制它们的顺序，因为如果flux尚不可用，这些事件将排队
  4. 设置页面浏览以触发这两个标签

如果您想在一个复杂的网站中强制使用页面ID进行跟踪，而URL匹配可能不太有效，我们建议在GTM中创建一个查找或正则表达式表变量。

然后，您可以将不同的URL/路径映射到FunnelFlux中的页面ID，并在页面浏览事件标签中，您可以传递 p: {{gtm_variable}} 以让GTM强制使用页面ID值。

在单页应用中跟踪浏览

如果您想手动发送页面浏览事件，独立于我们的全局代码片段（例如在单页应用中），您可以删除在我们的全局代码片段之后添加的默认 flux.track 代码。

从这里开始，您可以按照前面描述的方式手动触发页面浏览事件。

只要页面URL在我们的浏览事件初始化之前发生变化，API应该接收到预期的URL，它将根据当前漏斗中的页面匹配以确定节点ID。

如果需要，您可以在每个事件中推送页面ID值作为参数，以覆盖使用的URL匹配。

只要 flux 对象仍然存在，您就不应该需要多次加载全局代码片段。

我们的代码片段已经包含了检查flux是否存在的功能，如果存在，它不会尝试下载和重新注入脚本。

API请求和响应

浏览事件将向 https://your-custom-domain.com/js/funnel 发送POST请求，如下所示：

您可以通过搜索"funnel"和Fetch/XHR请求来过滤找到这个请求。

如果成功，响应将如下所示：

可以使用 flux.get() 方法轻松访问resolvedToken项。

在某些情况下可能会发生错误，或者响应可能会破损。

一些简单的检查可以确认跟踪请求是否成功：

  • fluxView事件被分派（参见事件监听器）
  • POST响应中error为null
  • POST响应中 resolvedTokens["{current-node-id}"] 有一个真实值
IMAGE

© FunnelFlux (HK) Limited