Help Center
Follow these steps to install the Ptengine tracking code on your Shopify store for accurate visitor tracking and insights.
To install the Basic Code, you need to add it to your Shopify theme file.
<head>
Tip: Make sure to place XXXXX (specific code placement instruction goes here) in the correct spot to ensure accurate tracking.
<!-- Ptengine Tag --> <script src="https://js.ptengine.com/xxxxx.js"></script> <!-- End Ptengine Tag -->
To track key events on your Shopify store, follow these steps to add custom tracking pixels using your Ptengine SID.
Tip: Make sure you replace the ID in the code with your correct Ptengine SID to ensure accurate tracking.
Updated code↓
function trackEvent(eventType, eventProperties, cb) { //Please replace the id with your project id const sid = "Please enter the project id"; const area = "com"; const options = eventProperties || {}; loadPtengineScript(sid, area) .then(() => { console.log("ptengine script loading complete"); window.ptengine && window.ptengine.track(eventType, options); cb && typeof cb === "function" && cb(); }) .catch((error) => { console.error("ptengine script loading failed:", error); }); } function loadPtengineScript(sid, area) { return new Promise((resolve, reject) => { if (window.ptengine) { // If ptengine already exists, resolve it immediately resolve(); } else { // Keep the original url const url = window.location.href.replace( /\/wpm@[a-zA-Z0-9]+\/web-pixel-[a-zA-Z0-9]+@[a-zA-Z0-9]+\/sandbox\/modern/, "" ); // Using the original url to send the event window._pt_sp_2 = []; _pt_sp_2.push(`setAccount, ${sid}`); _pt_sp_2.push(`setPVTag,${url},replace`);
// Dynamically load the ptengine script const script = document.createElement("script"); // Check if it is on the checkout page const isCheckoutPage = window.location.href.includes("checkouts"); const sandboxQuery = isCheckoutPage ? "" : "?sandbox"; // None added on the checkout page '?sandbox' script.src = https://js.ptengine.${area}/${sid}.js${sandboxQuery}; script.onload = () => resolve(); // Load successfully script.onerror = () => reject(new Error("Script loading failed")); // Load failed document.head.appendChild(script); }
https://js.ptengine.${area}/${sid}.js${sandboxQuery}
}); } // 使用回调函数触发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. Events definition:
search_submitted: use searching
collection_viewed:collection page viewed
product_viewed:product detail page viewed
product_added_to_cart:add to cart
product_removed_from_cart:remove the cart
cart_viewed:cart viewed
checkout_started:enter the checkout page
checkout_contact_info_submitted:input contacting information: email
checkout_address_info_submitted:input the adress
checkout_shipping_info_submitted:select the shipping method
payment_info_submitted:select the payment method
checkout_completed:purchase
For advanced tracking, you can use the ptengine.track method to monitor key user actions, such as:
ptengine.track
This method lets you track specific user interactions and even add extra details, like product information or customer behavior data.
1️⃣ Use the ptengine.track method to track events.
2️⃣ Embed this code inside any user action (e.g., checkout, form submission).
3️⃣ Customize event properties to collect more detailed insights.
📌 Example Code:
This example tracks a purchase event, including product details.
ptengine.track("check_out", { //Event name,for example purchase、signup… product_category: "Clothing", //Event profile, for example sku, signup information… product_pricing: "1293" });
Not familiar with Ptengine’s event definitions? [Check out this guide] to learn more about event tracking.
document.getElementById('btnLogin').addEventListener('click', function (){ ptengine&&ptengine.track('signup'); });
Example 2: When there are two add-to cart buttons on the page, but we want to mark both two buttons as one event
try { <script type="text/javascript">try {window.ptengine && window.ptengine.track("purchase");} catch (e) {console.error("Error tracking purchase:", e);}</script> opationRecord = []; function ptEventSend(eventName) { if (eventName && !opationRecord.includes(eventName)) { opationRecord.push(eventName); window.ptengine && window.ptengine.track(eventName); } } function addEventListenersToElements() { var addCartBottom = document.getElementById(add_cart_bottom); var addCart = document.getElementById(add_cart); if (addCartBottom) { addCartBottom.addEventListener(click, function() { ptEventSend(add the products to cart); }, false); } if (addCart) { addCart.addEventListener(click, function() { ptEventSend(add to cart from the sticky bar); }, false); } } addEventListenersToElements(); var ptTimer = setInterval(addEventListenersToElements, 500); } catch (e) {}
The Identify Code helps recognize and track users, turning anonymous visitors into identified users. This allows you to:
We recommend adding the Identify Code on pages where users log in, sign up, or enter personal details, such as:
When a user logs in or registers, Ptengine links their information to their device, making it possible to track individual behavior and optimize their experience.
Example Code:
<script> document.getElementById('btnSignup').addEventListener('click', function() { ptengine.identify(document.getEleme ntById('uid').value, { //Get email Data email : document.getElementById('email').value, //Get Phone Data phone : document.getElementById('phone').value, //Get genger Data gender: document.getElementById('sex').value, //Get age Data age: document.getElementById('age').value, last_active_date: new Date() }) }); </script>
This example assigns a unique ID (Uid) to a user and stores key details like name, email, and membership type.
Uid
Once users are identified, Ptengine binds user attributes to their unique ID (Uid). You can:
Was this article helpful?
Thanks for your feedback.
Sorry about that. Do you mind sharing how we can improve?
Write your feedback here...
We have received your feedback and will make sure to improve this article. We will get in touch with you once we do.