Installing Tags in Shopify

Installing Tags in Shopify

For Shopify app integration setup, see also Shopify Integration.

Basic Tag Installation

1. Find the theme.liquid template

In the Shopify admin dashboard, select "Online Store" → "Themes", then select "Edit code" from the "…" button

2. Install the Ptengine basic tag under

Please paste the Ptengine basic tag in the red box area on the right side of the image below.

Example of Basic Tag

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

DANGER

⚠️ Caution

The xxxxxxxx part above is your project ID, which differs for each Ptengine project.

Please replace it with your own project's ID.

For more details, please refer to this article.

How to Obtain the Ptengine Basic Tag

Event Installation

Simply installing the basic tag above is not enough to aggregate behavioral data such as purchase completion and cart addition, which are common on e-commerce sites.

Therefore, if you also want to check event data and conversion data on Ptengine, we also recommend setting up events.

Implementing Event Collection Tags

1. Select "Settings" in the Shopify Admin Dashboard

2. Select "Customer events"

3. Set a Pixel Name

Click the black "Add custom pixel" button in the top right, and set the pixel name in the popup. (In the figure below, we have set it to "pt tracking on checkouts" as an example)

Then click "Add pixel".

4. Save

Paste the code below in the Code section, and save by clicking "save" in the top right.

DANGER

⚠️ Caution

Be sure to replace const sid with your own Ptengine project ID!!!

// Code to paste
function trackEvent(eventType, eventProperties, cb) {
  const sid = "Enter your profile ID";
  // Enter your project ID!
  const area = "jp";
  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("Ptengine script loading failed:", error);
    });
}

function loadPtengineScript(sid, area) {
  return new Promise((resolve, reject) => {
    if (window.ptengine) {
      resolve();
    } else {
      const url = window.location.href.replace(
        /\/wpm@[a-zA-Z0-9]+\/web-pixel-[a-zA-Z0-9]+@[a-zA-Z0-9]+\/sandbox\/modern/,
        ""
      );
      window._pt_sp_2 = [];
      _pt_sp_2.push(`setAccount, ${sid}`);
      _pt_sp_2.push(`setPVTag,${url},replace`);

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

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

5. Publish

Finally, click the "Connect" button in the top right to publish the code set in Step 4.

About Event Tag Firing Timing

Important Notes

When using Ptengine with Shopify, please be sure to check the following points.

1. Please install the Ptengine basic tag directly in "Shopify themes"

Please install the Ptengine basic tag directly in Shopify themes (theme.liquid).

Installing via Google Tag Manager may not allow event measurement due to Shopify's specifications.

Therefore, we do not recommend installing through tag managers such as GTM, and it is outside the scope of support.

2. Do not add page-by-page transmission restrictions or conditions

We do not recommend modifying the Ptengine basic script to fire only on specific pages or restricting firing based on URL conditions.

Please understand that we cannot investigate the cause or provide support for any data measurement issues that occur in such cases.

3. If you change the theme, you need to reinstall the tags

In Shopify, when you change a theme, the contents of theme.liquid are reset.

Therefore, if you switch themes or apply a new theme, please reinstall the Ptengine basic tag in the new theme as well.

Please note that if you do not reinstall the tag, Ptengine measurement will not be performed.