Shopify 如何部署代码

关于Shopify应用集成配置,请参阅Shopify集成

Shopify电商埋码指南

以下提供的脚本方便Shopify电商客户进行快速埋码设置

1. 代码中找到theme.liquid模板,设置基础埋码

Tips: xxxxx位置具体参考Alt

<!-- Ptengine Tag -->
<script src="https://js.ptengine.com/xxxxx.js"></script>
<!-- End Ptengine Tag -->

2. 事件采集部署

打开设置中的“客户事件”,将下列代码中的sid和步骤一一样,替换为sid 并全部粘贴进自定义像素中。 保存并连接。 请务必将id替换为您的sid

function trackEvent(eventType, eventProperties, cb) {
     //请务必将id替换为您的档案id
     const sid = "请输入档案id";
     const area = "com";
     const options = eventProperties || {};
    
     loadPtengineScript(sid, area)
     .then(() => {
     console.log("ptengine脚本加载完成");
     window.ptengine && window.ptengine.track(eventType, options);
     cb && typeof cb === "function" && cb();
     })
     .catch((error) => {
     console.error("ptengine脚本加载失败:", error);
     });
    }
    
    function loadPtengineScript(sid, area) {
     return new Promise((resolve, reject) => {
     if (window.ptengine) {
     // 如果ptengine已经存在,则立即解决
     resolve();
     } else {
     // 保留原始url
     const url = window.location.href.replace(
     /\/web-pixels.*\/sandbox\/modern/,
     ""
     );
     // 使用原始url进行发包
     window._pt_sp_2 = [];
     _pt_sp_2.push(`setAccount, ${sid}`);
     _pt_sp_2.push(`setPVTag,${url},replace`);
    
     // 动态加载ptengine脚本
     const script = document.createElement("script");
     // 判断是否在checkout页面
     const isCheckoutPage = window.location.href.includes("checkouts");
     const sandboxQuery = isCheckoutPage ? "" : "?sandbox"; 
    //checkout页面不添加'?sandbox'
     script.src = `https://js.ptengine.${area}/${sid}.js${sandboxQuery}`;
     script.onload = () => resolve();
     // 加载成功
     script.onerror = () => reject(new Error("Script loading failed"));
     //加载失败
     document.head.appendChild(script);
     }
     });
    }
    
    // 使用回调函数触发identify包例子
    analytics.subscribe("checkout_completed", (event) => {
     const checkout = event?.data?.checkout;
     const checkoutTotalPrice = checkout?.totalPrice?.amount;
     const checkoutItems = checkout?.lineItems;
     const checkoutOrderId = checkout?.order?.id;
     const uid = event?.data?.clientId;
    
     const eventProperties = {
     totalPrice: checkoutTotalPrice,
     totalorderid: checkoutOrderId,
     };
    
     const identifyCallback = () => {
     checkoutItems.forEach((checkoutItem) => {
     ptengine &&
     ptengine.identify(uid, {
     totalPrice: checkoutTotalPrice,
     totalorderid: checkoutOrderId,
     totalquantity: checkoutItem?.quantity,
     totaltitle: checkoutItem?.title,
     totalid: checkoutItem?.id,
     totalsku: checkoutItem?.variant?.sku,
     totalProductType: checkoutItem?.variant?.product?.type,
     });
     });
     };
     trackEvent("checkout_completed", eventProperties, identifyCallback);
    });
    
    analytics.subscribe("search_submitted", (event) => {
     trackEvent("search_submitted");
    });
    
    analytics.subscribe("collection_viewed", (event) => {
     trackEvent("collection_viewed");
    });
    
    analytics.subscribe("product_viewed", (event) => {
     trackEvent("product_viewed");
    });
    
    analytics.subscribe("product_added_to_cart", (event) => {
     trackEvent("product_added_to_cart");
    });
    
    analytics.subscribe("product_removed_from_cart", (event) => {
     trackEvent("product_removed_from_cart");
    });
    
    analytics.subscribe("cart_viewed", (event) => {
     trackEvent("cart_viewed");
    });
    
    analytics.subscribe("checkout_started", (event) => {
     trackEvent("checkout_started");
    });
    
    analytics.subscribe("checkout_contact_info_submitted", (event) => {
     trackEvent("checkout_contact_info_submitted");
    });
    
    analytics.subscribe("checkout_address_info_submitted", (event) => {
     trackEvent("checkout_address_info_submitted");
    });
    
    analytics.subscribe("checkout_shipping_info_submitted", (event) => {
     trackEvent("checkout_shipping_info_submitted");
    });
    
    analytics.subscribe("payment_info_submitted", (event) => {
     trackEvent("payment_info_submitted");
    });

3.事件定义:

search_submitted:使用搜索功能

collection_viewed:列表页访问

product_viewed:商品详情页访问

product_added_to_cart:添加购物车

product_removed_from_cart:移除购物车

cart_viewed:购物车页面访问

checkout_started:进入checkout页面

checkout_contact_info_submitted:输入联系方式:邮箱

checkout_address_info_submitted:输入地址

checkout_shipping_info_submitted:选择快递信息

payment_info_submitted:选择支付方式

checkout_completed:支付成功

最后更新于