how to install tag in shopify

Step 1: Insert Basic PTengine Tag in theme.liquid Template #

1. Locate the theme.liquid template in your code.

2. Insert the following basic PTengine tag code shown in the screenshot.
   
   example：

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

Step 2: Implement Event Tracking #

1. Go to Customer Events in settings.

2. Use the following code, replacing **"YOUR_SID_HERE"** with your PTengine SID.

3. Paste all the code into the Custom Pixel section, save, and connect. Ensure the sid is correctly replaced with your own.

function trackEvent(eventType, eventProperties, cb) {

// Ensure to replace 'sid' with your own

  const sid = **"YOUR_SID_HERE"**;
  const area = "com";
  const options = eventProperties || {};

  loadPtengineScript(sid, area)
    .then(() => {
      console.log("PTengine script loaded successfully");
      window.ptengine && window.ptengine.track(eventType, options);
      cb && typeof cb === "function" && cb();
    })
    .catch((error) => {
      console.error("Failed to load PTengine script:", error);
    });
}

function loadPtengineScript(sid, area) {
  return new Promise((resolve, reject) => {
    if (window.ptengine) {
      resolve(); 
      // If PTengine already exists, resolve immediately

    } else {

      // Store 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/,
        ""
      );

   // Use the original URL for tagging

      window._pt_sp_2 = [];
      _pt_sp_2.push(`setAccount, ${sid}`);
      _pt_sp_2.push(`setPVTag,${url},replace`);

      // Load PTengine script dynamically

      const script = document.createElement("script");
      const isCheckoutPage = window.location.href.includes("checkouts");
      const sandboxQuery = isCheckoutPage ? "" : "?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);
    }
  });
}

// Example of using a callback to trigger identify event

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");
});

Step 3: Event Definitions #

These are the events set up for tracking. Each event corresponds to a specific customer action:

1. search_submitted: Customer uses the search function

2. collection_viewed: Customer visits a list or collection page

3. product_viewed: Customer views a product details page

4. product_added_to_cart: Product added to cart

5. product_removed_from_cart: Product removed from cart

6. cart_viewed: Customer views the cart page

7. checkout_started: Customer begins the checkout process

8. checkout_contact_info_submitted: Customer submits contact information (email)

9. checkout_address_info_submitted: Customer submits address

   10. checkout_shipping_info_submitted: Customer selects shipping option

   11. payment_info_submitted: Customer selects payment method