# Build Web Pixel

> Step-by-step guide to embedding pixel code in a Shoplazza store with the Custom Code Embedding app and configuring event tracking for the order completion page.

## How to Build Web Pixels

:::note[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](https://appstore.shoplazza.com/listing/153/custom_script_tag/?locale=en-US\&utm_source=store_admin\&from=store_admin\&store_id=1965351\&user_id=3e8269a2-4a23-480d-a37a-c3301580ebd5\&keyword=customize%20code\&page=1\&order_by=best_match) from the Shoplazza app store (for multi-event tracking).
* **[Pixel ID](/docs/theme/theme-features/tracking-and-analytics/platform-pixel-event-template)**: A unique identifier provided by the third-party platform.
* **[Third-Party Tracking Templates](/docs/theme/theme-features/tracking-and-analytics/platform-pixel-event-template)**: Code snippets for the respective platforms (e.g., Google Analytics, Facebook, Criteo).

## How to Build and Configure Web Pixels

Choose an integration path based on what you need to track. The two options and their steps are shown below:

```mermaid
flowchart LR
    A{What do you need to track?} -- Multiple events across pages --> B[Option 1: Custom Code Embedding App]
    A -- Only order completion --> C[Option 2: Checkout Page Settings]
    B --> B1[Install the Custom Code Embedding App]
    B1 --> B2[Open the Custom Code panel]
    B2 --> B3[Global code: set trigger to All Pages, paste base code, replace Pixel ID]
    B3 --> B4[Specific-page code: set Specific Pages, pick page, paste modified code, replace variables]
    C --> C1[Settings - Checkout Settings - Additional Scripts]
    C1 --> C2[Paste custom JavaScript]
    C2 --> C3[Runs on the Order Completion Page]
```

### Option 1: Using the Custom Code Embedding App

* #### Navigate to the Shoplazza app store and install the  [Custom Code Embedding App](https://appstore.shoplazza.com/listing/153/custom_script_tag/?locale=en-US\&utm_source=store_admin\&from=store_admin\&store_id=1965351\&user_id=3e8269a2-4a23-480d-a37a-c3301580ebd5\&keyword=customize%20code\&page=1\&order_by=best_match).
* #### 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.\
  > &#x9;•	Replace placeholders like `<Pixel ID>` 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:\
  > &#x9;•	Set the trigger page to “Specific Pages”.\
  > &#x9;•	Select “Order Completion Page”.\
  > &#x9;•	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.

![](https://cnres.appracle.com/feebbd8a7c6a5abb464c8828dc6866f6.png)

# 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.

| **Field**                | **Description**               | **Code**                                    |
| ------------------------ | ----------------------------- | ------------------------------------------- |
| **Currency**             | Cart's currency code          | `window.C_SETTINGS.currency_code`           |
| **Product Price**        | Price of the added product    | `detail.item_price`                         |
| **Variant ID**           | Product variant identifier    | `detail.variant_id`                         |
| **Product ID**           | Product identifier            | `detail.product_id`                         |
| **Product Name**         | Name of the product           | `detail.name`                               |
| **Quantity Added**       | Quantity of the product added | `detail.quantity`                           |
| **Email (if logged in)** | Customer's email address      | `window.C_SETTINGS.customer.customer_email` |

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

```html
<!-- 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:**

```html
<!-- 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**

| Placeholder          | Example Variable                               |
| :------------------- | :--------------------------------------------- |
| Currency             | `window.C_SETTINGS.currency_code`              |
| Product Price        | `detail.selected.price`                        |
| Product Variant ID   | `detail.selected.id`                           |
| Product ID           | `detail.product.id`                            |
| Product Name         | `detail.product.title`                         |
| Quantity             | `detail.qty`                                   |
| Email (if logged in) | \`window\.C\_SETTINGS.customer.customer\_email |

**Before Modification:**

```html
<!-- 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:**

```html
<!-- 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:**

![](https://cnres.appracle.com/798df41fcaa27f982e3549db0d0756c8.png)

#### **After Modification Example Code:**

```html
<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:**

![](https://cnres.appracle.com/de9edd12afd3a5db4b6c25192770e448.png)

#### **After Modification Example Code:**

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