AppLovin Pixel 集成

AppLovin 是一家全球领先的移动营销平台，专注于帮助开发者最大化应用收入。以下教程将为您介绍如何在 Shoplazza 安装 AppLovin 的 Pixel。

注意

该页面的代码基于 AppLovin 官方教程生成： AXON Pixel Google Tag Manager Integration 。
本文展示的代码仅作参考，请联系相关广告平台获取符合您账户的代码。
使用过程中，如遇转化事件等不生效，建议您及时联系广告平台侧检查代码准确性。
如遇前端显示异常，该问题可能是添加的代码与您的主题不适配，或者与您添加的其他代码相互冲突，请即刻删除相关代码，检查代码的完整性，并与您的技术团队取得联系以获取进一步的协助与支持。

准备工作

安装该 Pixel 使用的自定义代码嵌入插件下架了结账页的代码安装入口，需要联系在线客服申请结账页代码的使用入口，才能向结账页安装追踪代码。

安装代码

注意

需要联系在线客服，获取结账页代码的使用入口后，再继续以下操作。

安装基础代码

将以下代码复制并粘贴到自定义代码嵌入插件中。将代码中“ «您的event-key»”替换为您AppLovin 帐户中的 event key。

代码配置：

选择用户端：PC端和手机端
触发页面：全部
代码位置：顶部

<script>
  var AXON_EVENT_KEY="«您的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>

安装 PageView 事件代码

将以下代码复制并粘贴到自定义代码嵌入插件中。

代码配置：

选择用户端：PC端和手机端
触发页面：全部
代码位置：底部

<script>
  axon("track", 'page_view');
</script>

注意

以下几个事件代码，需要将代码中“item_category_id”部分的XXXX自行替换为您商品的分类ID，具体分类可参考文档： Category IDs 。

安装 ViewContent 事件代码

将以下代码复制并粘贴到自定义代码嵌入插件中。

代码配置：

选择用户端：PC端和手机端
触发页面：全部
代码位置：底部

<script> try { 


    document.addEventListener("dj.viewContent", function(e) {
        const detail = e.detail;
      console.log(detail);
if(!detail. selected.id) return;
        axon("track", "view_item", {
            currency: window.C_SETTINGS.currency_code,
            items: [{
               image_url:'https:'+detail.product.image.src,
item_variant_id:detail. selected.id ,
                price: detail.product.price,
                item_id: detail.product.id,
price:detail.product.price,
                item_name: detail.product.title,
                quantity: 1,
                item_category_id: XXXX
            }]
        });
    });

  
 } catch(e){  }</script>

安装 AddToCart 事件代码

将以下代码复制并粘贴到自定义代码嵌入插件中。

代码配置：

选择用户端：PC端和手机端
触发页面：全部
代码位置：底部

<script> try { 
const getProductInfo = (id) => {
  return fetch(`/api/products/${id}`, {
    method: 'get',
    headers: {
      'Content-Type': 'application/json'
    }
  })
    .then((response) => response.json())
    .then((data) => {
      return data.data.product.image.src;
    });
};

    document.addEventListener("dj.addToCart", async function(e) {
        const detail = e.detail;
const product_image_url = await getProductInfo(detail.product_id);
    console.log(detail);
        axon("track", "add_to_cart", {
            currency: window.C_SETTINGS.currency_code,
            items: [{
                image_url:product_image_url ? window.location.protocol + product_image_url : '',
                item_variant_id:detail.variant_id,
                price: detail.item_price,
                item_id: detail.product_id,
                item_name: detail.name,
                'quantity': detail.quantity,
                item_category_id: XXXX,
            }]
        });
    });

  
 } catch(e){  }</script>

安装 InitiateCheckout 事件代码

将以下代码复制并粘贴到自定义代码嵌入插件中。

代码配置：

选择用户端：PC端和手机端
触发页面：指定页面—结账页
代码位置：底部

<script type="text/javascript"> try {  
function trackCheckout() {
    if (!location.href.includes('/checkout')) return;
    let attempts = 0;

    const check = () => {
        attempts++;
        const products = CheckoutAPI ? CheckoutAPI.summary.getUiProductList() : [];
        if (products.length > 0) {
            const total = products.reduce((sum, item) => 
                sum + (item.price || 0) * (item.quantity || 0), 0);console.log('track begin');
            axon("track", 'begin_checkout', {
                currency: window.C_SETTINGS.currency_code,
                value: total,
                items: products.map(item => ({
                    item_id: item.id,
                    item_variant_id: item.variantId,
                    price: item.price,
                    quantity: item.quantity,
                    item_name: item.productTitle,
                    item_category_id: XXXX,
 image_url:'https:'+item.coverUrl
                }))
            });
        } 
        else if (attempts < 50) {
            setTimeout(check, 100);
        }
    };
    check();
}
if (document.readyState === 'complete') {
    trackCheckout();
} else {
    window.addEventListener('load', trackCheckout);
} } catch(e){  }</script>

安装 Purchase 事件代码

将以下代码复制并粘贴到自定义代码嵌入插件中。

代码配置：

选择用户端：PC端和手机端
触发页面：指定页面—订单完成页
代码位置：底部

<script> try { console.log('1',window.ORDER);
  axon('track', 'purchase', {
    'currency': window.ORDER.currency_code,       
    'value': window.ORDER.prices.total_price,           
    'transaction_id': window.ORDER.id,     
shipping:window.ORDER.shipping_total,
tax:window.ORDER. tax_total,
user_id:window.ORDER.customer.user_id,
      items: window.ORDER.line_items.map(function (item) {
          return {
           item_variant_id:item.variant_id,
           item_id: item.id,
            price: item.price,
            quantity: item.quantity,
            item_name:  item. product_title,     
item_category_id:XXXX,
            image_url: 'https:' + item.image.src
          }
        })
});
 } catch(e){ }</script>

验证 Pixel

完成以上的代码添加工作之后，需要确认 Pixel 是否被成功安装。请点击：AXON Pixel Helper 安装验证插件。

插件安装完成后，访问您的网站时点击该插件并测试事件：

绿色--上报成功。
黄色--可优化（建议参数未上传，事件可优化），取决于广告类型，非必须优化。
红色--上报失败。

使用过程中，如遇转化事件等不生效，建议您及时联系广告平台侧检查代码准确性。

AppLovin Pixel 集成

准备工作

安装代码

验证 Pixel

相关主题

评论