How to Build Web Pixels

📘

What You Will Learn in This Tutorial

This section explains how to:

1. Embed pixel code into your Shoplazza store using the Custom Code Embedding app.
2. Configure event tracking for the order completion page via Checkout Settings.
3. Customize pixel code for different events.

Requirements

• App Requirement: Install the Custom Code Embedding App from the Shoplazza app store (for multi-event tracking).
• Pixel ID: A unique identifier provided by the third-party platform.
• Third-Party Tracking Templates: Code snippets for the respective platforms (e.g., Google Analytics, Facebook, Criteo).

How to Build and Configure Web Pixels

Option 1: Using the Custom Code Embedding App

• Navigate to the Shoplazza app store and install the Custom Code Embedding App.

• Access the Custom Code Panel.

• Create Global and Specific Page Tracking Code

  1. create custom code for all pages (e.g., loading the pixel globally).

  In the custom code panel:
  • Set the trigger page to “All Pages”.
  • Paste the base Pixel code provided by the third-party platform.
  • Replace placeholders like with the unique ID provided by the platform.

  Example

  
  
  html

  <!-- Criteo Loader File -->
  <script type="text/javascript" src="//dynamic.criteo.com/js/a.js?a=<Pixel ID>" async="true"></script>
  <!-- END Criteo Loader File -->
  

• 2. create custom code for specific pages (e.g. order completion page for tracking order events)

  In the custom code panel:
  • Set the trigger page to “Specific Pages”.
  • Select “Order Completion Page”.
  • Paste the modified Pixel code for the order completion event.

  Example -- Specific Page: Order Completion Page

  
  

  Replace Placeholder Parameters in the Provided Template

  Field	Description	Example Code
  Currency	Currency code of the order	window.ORDER.currency_code
  Order Total	Total price of the order	window.ORDER.total_price
  Order ID	Unique identifier for the order	window.ORDER.id
  EMAIL	Recipient's email address	window.ORDER.shipping_address.email
  Phone	Recipient's phone number	window.ORDER.shipping_address.phone

  Order Item Fields

  Field	Description	Example Code
  order.line_items		window.ORDER.line_items.map(function (item) { return { id: item.variant_id, price: item.price, quantity: item.quantity, // ...other item properties }; });
  line_items ID	Unique ID for the product variant	item.variant_id
  line_items Price	Price of the item	item.price
  line_items Quantity	Quantity purchased	item.quantity

  After Modification

  HTML

  <!-- Criteo Purchase Tag -->
  <script type="text/javascript">
      window.criteo_q.push(
        { event: "setAccount", account: 891781 },
        { event: "setEmail", email: window.ORDER.shipping_address.email },
        { event: "setSiteType", type: deviceType },
        {
          event: "trackTransaction",
          id: window.ORDER.id,
          currency: window.ORDER.currency_code,
          item: window.ORDER.line_items.map(function (item) {
            return {
              id: item.variant_id,
              price: item.price,
              quantity: item.quantity,
              // ...other item properties
            };
          }),
        }
      );
    </script>
    
  <!-- END Criteo Purchase Tag -->
  

  
  

Option 2: Using Checkout Page Settings - Additional Scripts

If you only need to track order completion events, you can achieve this by using the Checkout Page Settings to embed your custom script.

Steps to Implement:

1. Navigate to Settings > Checkout Settings in your Shoplazza admin panel.
2. Locate the Additional Scripts section.
3. Paste your custom JavaScript code into the field provided. This code will run on the Order Completion Page after a customer successfully checks out.

More examples

Below are three detailed examples of how to create custom events for tracking different user actions, including adding products to the cart, viewing product details, and email subscription. These examples showcase how to use Shoplazza's available data fields to populate third-party pixel code templates.

Example 1: Add to Cart Event

Trigger Page: All Pages

To track when a customer adds a product to their cart, use the dj.addToCart event listener to wrap your third-party platform's reporting code.

Replace Placeholder Parameters in Platform-Provided Code Templates

Below are the available fields and their corresponding values. These can be accessed from the detail variable to populate the required parameters for event tracking.

Before Modification:
The following is an example of the Add to Cart event (Add To Cart Tag) template provided by Criteo.

<!-- Criteo Add to Cart Tag -->
<script type="text/javascript">
  window.criteo_q = window.criteo_q || [];
  var deviceType = /iPad/.test(navigator.userAgent)
    ? "t"
    : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(
        navigator.userAgent
      )
    ? "m"
    : "d";
  window.criteo_q.push(
    { event: "setAccount", account: 89178 },
    { event: "setEmail", email: "#Email Address of User#" },
    { event: "setSiteType", type: deviceType },
    {
      event: "addToCart",
      item: [
        { id: "#Product Id#", price: "#Price#", quantity: "#Quantity#" },
      ],
    }
  );
</script>
<!-- END Criteo Add to Cart Tag -->

 

After Modification Example Code:

<!-- Criteo Add to Cart Tag -->
<script type="text/javascript">
  document.addEventListener("dj.addToCart", function (e) {
    const detail = e.detail;
    // Third-party platform reporting code
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent)
      ? "t"
      : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(
          navigator.userAgent
        )
      ? "m"
      : "d";
    window.criteo_q.push(
      { event: "setAccount", account: account_id },
      {
        event: "setEmail",
        email: window.C_SETTINGS.customer.customer_email || "",
      },
      { event: "setSiteType", type: deviceType },
      {
        event: "addToCart",
        currency: window.C_SETTINGS.currency_code,
        item: [
          {
            id: detail.variant_id,
            price: detail.item_price,
            quantity: detail.quantity,
          },
        ],
      }
    );
  });
</script>
<!-- END Criteo Add to Cart Tag -->

 

Example 2: View Product Event

Trigger Page: All Pages

To track when a customer views a product, use the dj.viewContent event listener.

Replace Placeholder Parameters in Platform-Provided Code Templates

Before Modification:

<!-- Criteo Product Tag -->
<script type="text/javascript">
  window.criteo_q = window.criteo_q || [];
  var deviceType = /iPad/.test(navigator.userAgent)
    ? "t"
    : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(
        navigator.userAgent
      )
    ? "m"
    : "d";
  window.criteo_q.push(
    { event: "setAccount", account: 89178 },
    { event: "setEmail", email: "##Email Address of User##" },
    { event: "setSiteType", type: deviceType },
    { event: "viewItem", item: "##Product ID##" }
  );
</script>
<!-- END Criteo Product Tag -->

After Modification Example Code:

<!-- Criteo Product Tag -->
<script type="text/javascript">
  document.addEventListener("dj.viewContent", function (e) {
    const detail = e.detail;
    // Third-party platform reporting code
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent)
      ? "t"
      : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(
          navigator.userAgent
        )
      ? "m"
      : "d";
    window.criteo_q.push(
      { event: "setAccount", account: 89178 },
      {
        event: "setEmail",
        email: window.C_SETTINGS.customer.customer_email || "",
      },
      { event: "setSiteType", type: deviceType },
      {
        event: "viewItem",
        item: detail.selected.id,
        price: detail.selected.price,
      }
    );
  });
</script>
<!-- END Criteo Product Tag -->

Example 3: Email Subscription Event

Trigger Page: All Pages

Using the dj.emailSubscription Event to Monitor and Wrap Third-Party Code Templates for Reporting

Before Modification:

After Modification Example Code:

<script type="text/javascript">
  document.addEventListener("dj.emailSubscription", function () {
    // Wrap the third-party code template with the event listener
  });
</script>

 

Example 4: User Registration Event

Trigger Page: All Pages

Using dj.completeRegistration Event to Monitor and Wrap Third-Party Code Templates for Reporting

Before Modification:

After Modification Example Code:

<!-- Track conversion event, please use EXACT 'event', 'complete_registration' in the code below -->
<script>
  document.addEventListener("dj.completeRegistration", function () {
    nbpix("event", "complete_registration");
  });
</script>