Meta 像素( JS/ TS)

为JavaScript和TypeScript应用程序提供最强大和最方便开发者的Meta像素集成.

为Meta Pixel提供无缝,类型安全体验的平台-可知包装器,具有事件分解等先进特性,多像素支持,以及美丽的调试记录.

目录

• 特征
• 快速启动
• 安装
• 使用量
• 配置
• 标准事件
• 事件数据参数
• 高级使用
• 类型脚本支持
• 解决问题
• 正式文件
• 许可证

* 特性

• ✅ 键入符支持 - 对所有正式事件和参数进行自动完成的完整类型脚本支持
• 🎯 自定义事件支持 - 跟踪具有完整类型安全和灵活数据结构的自定义事件
• 🚦 事件重复 - 支持防止事件重复和事件标识
• 🔌 多像素支持 - 不加努力地装入和管理多个像素标识
• 🐛 调试模式 - 用于开发和调试的漂亮的有风格的控制台日志
• 🏠 本地主机支持 - 方便配置,以便在本地主机上启用/无法跟踪

QQ 快速启动

npm install @adkit.so/meta-pixel

import META from '@adkit.so/meta-pixel';

// 1. Initialize
META.init({ pixelIds: 'YOUR_PIXEL_ID' });

// 2. Track events
META.track('Purchase', { value: 99.99, currency: 'USD' });

就这样

* 安装

npm install @adkit.so/meta-pixel

使用量

基本初始化

在应用程序入口处尽早初始化像素(例如, main.ts, (中文(简体) ), App.jsx, (中文(简体) ), index.js) (中文(简体) ).

import META from '@adkit.so/meta-pixel';

META.init({
    pixelIds: '1234567890',
    autoTrackPageView: true, // default: true
});

跟踪事件

// Track standard events
META.track('AddToCart', {
    value: 29.99,
    currency: 'USD',
    content_ids: ['SKU_123'],
    content_type: 'product',
});

// Track custom events
META.trackCustom('MyCustomEvent', {
    custom_param: 'value',
});

多个实例

如果应用程序的不同部分需要单独实例( 罕见) :

import { createMetaPixel } from '@adkit.so/meta-pixel';

const marketingPixel = createMetaPixel();
marketingPixel.init({ pixelIds: 'MARKETING_ID' });

const productPixel = createMetaPixel();
productPixel.init({ pixelIds: 'PRODUCT_ID' });

QQ 配置

配置选项

多像素示例

META.init({
    pixelIds: ['PIXEL_ID_1', 'PIXEL_ID_2', 'PIXEL_ID_3'],
    debug: true,
});

标准事件

所有Meta像素标准事件都以完整的TypeScript自动完成支持. 这些事件帮助您追踪您网站上的重要动作,并优化您的广告宣传.

您可以找到标准事件的官方列表 这里。 。 。 .

事件数据参数

所有事件参数都是可选的,但有助于改进广告的定位和转换跟踪.

您可以找到属性列表 这里

高级用途

事件重复

通过使用独特的事件ID来防止重复事件跟踪. 在从客户端和服务器(CAPI)跟踪转换时,这一点至关重要.

const orderId = '12345';

META.track(
    'Purchase',
    {
        value: 299.99,
        currency: 'USD',
        content_ids: ['SKU_123'],
    },
    {
        eventID: `order-${orderId}`, // Unique Event ID
    },
);

检查像素是否已装入

如果您需要基于像素脚本是否已加载而有条件运行逻辑,则有用 .

if (META.isLoaded()) {
    META.track('Purchase', { value: 99.99, currency: 'USD' });
} else {
    console.log('Pixel not loaded yet');
}

调试模式

何时 debug: true 转至 init(),你会看到美丽的 风格控制台日志:

• 🔵 [Meta像素] 信息消息( 蓝色背景)
• ✅ [Meta像素] 成功信息( 绿色背景)
• ⚠️ [Meta像素] 警告信息( 橙色背景)

META.init({
    pixelIds: 'YOUR_ID',
    debug: true,
});

QQ 类型脚本支持

此软件包以TypeScript和捆绑类型定义来写出.

import type { StandardEvent, EventData, MetaPixelConfig } from '@adkit.so/meta-pixel';

const config: MetaPixelConfig = {
    pixelIds: '123',
};

const eventData: EventData = {
    value: 100,
    currency: 'USD',
};

* 解决问题

像素没有加载?

1. 检查您的像素标识 - 确保你的配置正确
2. 启用调试模式 - 准备 debug: true 内 init() 查看详细的日志
3. 检查浏览器控制台 - 查找错误或警告
4. 检查 Ad 屏蔽器 - 阿德阻断器经常阻断Meta像素脚本
5. 启用本地主机 - 准备 enableLocalhost: true 如果本地测试

Meta Eventure 管理器中未显示的事件 ?

• 等一会儿 - 事件需要5-20分钟才能出现
• 检查测试事件 - 在元事件管理器中使用测试事件工具
• 校验事件名称 - 标准事件对案件有敏感认识

* 正式文件

从官方Facebook资源了解更多Meta像素:

• Meta 像素参考 - 完整的API参考文献
• 标准事件指南 - 详细事件文件
• 对象属性 - 所有可用的事件参数
• 转换 API - 服务器侧事件跟踪
• 事件管理器 - 监视您的像素事件

平台软件包

使用框架? 看看我们的专用包:

• 坚果 - 说吧 @adkit.so/meta-pixel-nuxt
• 反应 - 说吧 @adkit.so/meta-pixel-react
• 下一个.js - 说吧 @adkit.so/meta-pixel-next

QQ 完整指南

关于安装和配置Meta像素的完整分步指南,请检查我们的详细教程:

如何安装元像素

捐款

欢迎捐款! 请随意提交拉力请求 对于重大变动,请先开出一个问题来讨论你想要改变什么.

许可证

麻省理工学院

由 Q 制作 阿德基特语Name

如果这个软件包帮助你,请考虑给它一个 \ \ 上 GitHub 图像来啊!