Axon Pixel 原生 JavaScript 集成
您可以将 Axon Pixel 集成到任何原生 JavaScript 网站或 JavaScript 框架构建的网站中。 与通过 Axon 的 Google 跟踪代码管理器 (GTM)或 Shopify 应用 集成相比，这种方式可能需要更多的集成工作，因此建议仅在您的网站无法使用上述集成方式时采用此方法。
集成 Axon Pixel 的过程与之前集成过的其他像素代码类似。
您可以使用 Axon Pixel Helper Chrome 扩展程序对 Pixel 安装情况进行调试与验证。
在开始之前，请确保您拥有网站源代码的写入权限。
安装 Axon Pixel
要在您的网站上使用 Axon Pixel，请按照下列步骤操作：
在网站上安装 Axon Pixel 代码
安装 Axon Pixel 代码的方式不同，具体取决于您网站上的页面是一组 HTML 文件还是根据 React 或类似 React 框架构建的网站中的通用模板生成：
如果您的网站由多个单独的 HTML 文件组成，请将以下代码复制并粘贴到您网站每个页面的 <head> 分段中：
<script>var AXON_EVENT_KEY="«your-event-key»";
!function(e,r){var t=["https://s.axon.ai/pixel.js","https://res4.applovin.com/p/l/loader.iife.js"];if(!e.axon){var a=e.axon=function(){a.performOperation?a.performOperation.apply(a,arguments):a.operationQueue.push(arguments)};a.operationQueue=[],a.ts=Date.now(),a.eventKey=AXON_EVENT_KEY;for(var n=r.getElementsByTagName("script")[0],o=0;o<t.length;o++){var i=r.createElement("script");i.async=!0,i.src=t[o],n.parentNode.insertBefore(i,n)}}}(window,document);
axon("init");</script>此代码必须在网站的每个页面上执行。
如果您的网站是基于 React 或类似框架构建的，您无需在每个页面中手动插入代码。建议将 Pixel 封装为一个组件，并将该组件添加到您的主容器中 (例如 App.jsx 或 App.tsx），如下所示：
// AxonPixel.js
import React from "react";
import { Helmet } from "react-helmet"; // Used to inject scripts into the <head> for SSR and dynamic head management
export const AxonPixel = () => {
return (
<Helmet>
<script>{`
var AXON_EVENT_KEY="«your-event-key»";
!function(e,r){var t=["https://s.axon.ai/pixel.js","https://res4.applovin.com/p/l/loader.iife.js"];if(!e.axon){var a=e.axon=function(){a.performOperation?a.performOperation.apply(a,arguments):a.operationQueue.push(arguments)};a.operationQueue=[],a.ts=Date.now(),a.eventKey=AXON_EVENT_KEY;for(var n=r.getElementsByTagName("script")[0],o=0;o<t.length;o++){var i=r.createElement("script");i.async=!0,i.src=t[o],n.parentNode.insertBefore(i,n)}}}(window,document);
axon("init");
`}</script>
</Helmet>
);
};// App.js
// Your root component
import React from "react";
import AxonPixel from "AxonPixel";
export const App = () => {
return (
{/* Your site content component(s) */ }
<AxonPixel />
);
};要查找您的 Axon Event Key，请导航至 AppLovin 控制面板中的 Account > General > Keys。
实时发送事件
在事件发生时，实时在网站中发送事件数据。请参阅 Axon Pixel 事件和对象，了解标准事件类型的详细信息。
请仅在 Pixel 初始化所在的组件完成挂载 (mount) 后再发送事件。
例如，以下代码发送 purchase 事件：
// CheckoutCompleted.js
export const CheckoutCompletedPage = (data) => {
useEffect(() => {
// Ensure to send after component has mounted on your site
var axonPurchaseData = utils.convertToAxonData(data);
axon("track", "purchase", axonPurchaseData);
}, [])
return (
{/* Your order confirmation page */ }
);
};这篇文章有帮助吗？
