npm 包 @oudyworks/webscripts-fbq 使用教程

前言

随着企业在线营销的日益重要，Facebook 像谷歌和百度一样成为重要的在线广告平台，因此绑定和追踪用户在页面上的行为越来越重要，同时，该数据也更反映用户兴趣和需求，方便今后的推送。

本文将介绍一款便于前端绑定 Facebook 像素跟踪代码的 npm 包：@oudyworks/webscripts-fbq。该包可帮助我们更方便地添加 Facebook 跟踪标签，而不会掺杂到业务逻辑中。

安装

在你的项目中使用 npm 安装 @oudyworks/webscripts-fbq：

npm i @oudyworks/webscripts-fbq --save

如何使用

该包提供了两个函数，loadFbq() 和 track()。

loadFbq()

使用 loadFbq() 函数来加载 Facebook 跟踪代码。 它将向页面中插入 Facebook 跟踪代码和包含 Facebook 确认代码的 JavaScript 代码。

import { loadFbq } from '@oudyworks/webscripts-fbq';

loadFbq('1234567890');

该函数将接受 Facebook 跟踪代码 id，并添加实例代码。

track()

使用 track() 函数来记录事件或流量统计信息。

import { track } from '@oudyworks/webscripts-fbq';

track("PageView");

该函数将调用 Facebook 跟踪代码的 track() 方法来记录跟踪信息。

示例

在下面的示例中，假设我们已将 Facebook 跟踪代码添加到我们的网站中，并且我们希望每次页面加载时都记录一个页面视图事件。

首先，在我们的项目的根目录中，我们运行：

npm i @oudyworks/webscripts-fbq --save

要使用该包，我们只需添加以下代码：

import { loadFbq, track } from '@oudyworks/webscripts-fbq';

// 加载 Facebook 跟踪代码
loadFbq('1234567890');

// 跟踪页面视图
track("PageView");

这将在我们的网站上添加 Facebook 像素跟踪代码，每次加载页面时，该包也将自动记录一个页面视图事件。

总结

在本文中，我们介绍了 npm 包 @oudyworks/webscripts-fbq，并提供了该包的使用示例。该包使得添加 Facebook 像素跟踪代码变得更加简单，方便并且不会影响我们业务逻辑。同时，我们还可以使用该包中提供的函数来记录事件或流量统计信息，更好的理解用户行为。希望该文章可以对想要使用 Facebook 像素的企业网站开发者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc481e8991b448dd220