Axon Pixel native JavaScript integration
You can integrate the Axon Pixel in any native JavaScript site or JavaScript framework. It may require more work to integrate the Axon Pixel in this way than (for example) with the Axon Google Tag Manager or the Shopify app, so you should only do this if your site cannot use an integration method like those.
You will find the process of integrating the Axon Pixel resembles other pixels you may have integrated in the past.
You can debug and validate your Pixel installation using the Axon Pixel helper Chrome Extension.
Before you begin, ensure that you have write access to your site’s source code.
Using the Axon Pixel
To use the Axon Pixel on your site, take the following steps:
Install the Axon Pixel code on your site
You install the Axon Pixel code in a different manner depending on whether the pages on your site are a set of HTML files or if they are generated from a common template as in React or React-like sites:
If your site is a set of individual HTML files, copy and paste the following code into the <head> subsection of every page of your site:
<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>This code must execute on each page of your site.
If you have a React or React-like site, rather than inserting this code manually into each of your pages, you can create a component for the Pixel and add it to your main container (such as App.jsx or App.tsx) like this:
// 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 />
);
};You can find your Axon event key in the Account > General > Keys section of the AppLovin dashboard.
Send events as they happen
Send events throughout your site when they occur. See Axon Pixel events and objects for details about the standard event types.
Send events only after the component on which you initialized the Pixel mounts on your site.
For example, the following code sends a purchase event:
// 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 */ }
);
};
