Setup eCommerce Events in Pixfizz CMS

Only required if you are not using the Shopper Managed Storefront

Setup eCommerce Events

• view_item

• add_to_cart

• view_cart

• begin_checkout

• purchase

view_item Event

This script should be placed on a snippet or page that will be rendered for all products. For the Shopper storefront template, the product/design_now snippet has the script.

<script>
    dataLayer.push({ ecommerce: null });
    dataLayer.push({
    event: "view_item",
    ecommerce: {
        currency: "{{ website.currency_code }}",
        value: {{ product.price }},
        items: [
        {
          item_id: "{{ product.code }}",
          item_name: "{{ product.name }}",
          index: 0,
          item_brand: "{% snippet 'website/brand' %}",
          item_category: "{% if product.custom.google_category != blank %}{{ product.custom.google_category | escape_json }}{% else %}{{ product.category | escape_json }}{% endif %}"
        }
        ]
      }
    });
</script>

add_to_cart Event

This is one of the more challenging scripts to deal with as there are multiple places where an end user can add a product to the cart. On the Shopper storefront template, there are 3 locations to manage:

1. The Design Tool
2. Saved Projects page
3. product/design_now snippet for static products or design products that can be added straight to cart

Design Tool

The below script needs to be in a dedicated editor-scripts.js page that has no Layout assigned to it, needs to be referenced in the Custom JS field on any Design Tool Configuration(s) that is/are live and need to be tracked. Be sure to also have the correct GTM ID on the Design Tool Configurations.

Be sure to change the currency, if it is not a USD storefront.

window.addEventListener("DOMContentLoaded", () => {
    mobx.when(() => editor.store.project.loaded, async () => {
        const product = await fetch(`/v1/products/${editor.store.project.product_id}.json`).then(r => r.json());
        const theme = await fetch(`/v1/themes/${editor.store.theme_id}.json`).then(r => r.json());

        document.querySelector(".px-cart-button").addEventListener("click", function () {
            dataLayer.push({
                event: "add_to_cart",
                ecommerce: {
                    currency: "USD",
                    value: product.starting_price,
                    items: [
                        {
                            item_id: `${theme.code}:${product.code}`,
                            item_name: `${theme.name} ${product.name}`,
                            index: 0,
                            item_category: product.custom.google_category || product.category,
                            price: editor.store.price,
                            quantity: 1
                        }
                    ]
                }
            });
        });
    });
});

account-saved-projects Page

The icon to add a project to the cart needs the following parameter code:

onclick="dataLayer.push({ event: 'add_to_cart', ecommerce: { currency: '{{ website.currency_code }}', value: '{{ product.price | escape }}', items: [{ item_id: '{{ product.code | escape }}', item_name: '{{ product.name | escape_json }}', index: 0, item_brand: '{{ website.title }}', item_category: '{% if product.custom.google_category != blank %}{{ product.custom.google_category | escape_json }}{% else %}{{ product.category | escape_json }}{% endif %}', price: '{{ product.price | escape }}', quantity: '{{ product.min_quantity }}' }] } });"

design_now Snippet

The button to submit the project_create form on the product/design_now snippet requires the following parameter code:

onclick="dataLayer.push({ event: 'add_to_cart', ecommerce: { currency: '{{ website.currency_code }}', value: '{{ product.price | escape }}', items: [{ item_id: '{{ product.code | escape }}', item_name: '{{ product.name | escape_json }}', index: 0, item_brand: '{{ website.title }}', item_category: '{% if product.custom.google_category != blank %}{{ product.custom.google_category | escape_json }}{% else %}{{ product.category | escape_json }}{% endif %}', price: '{{ product.price | escape }}', quantity: '{{ product.min_quantity }}' }] } });"

view_cart Event

Add the following script to the cart Page.

{% assign line_item_count = 0 %}
<script>
    dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
    dataLayer.push({
    event: "view_cart",
    ecommerce: {
    currency: "{{ website.currency_code }}",
    value: {{ cart.total | minus: cart.shipping }},
    items: [
    {%- for orderline in cart.orderlines %}
    {
      item_id: "{{ orderline.product.code | escape }}",
      item_name: "{{ orderline.product.name | escape}}",
      coupon: "{{ cart.promocode_code | escape }}",
      discount: {{ cart.discount }},
      index: {{ line_item_count }},
      item_brand: "{% snippet 'website/brand' %}",
      item_category: "{%- if orderline.product.custom.google_category != blank %}{{ orderline.product.custom.google_category | escape_json }}{% else %}{{ orderline.product.category | escape_json }}{%- endif %}",
      price: {{ orderline.price }},
      quantity: {{ orderline.quantity }}
    }{%- if forloop.last == false %},{%- endif %}
    {%- assign line_item_count = line_item_count | plus: 1 %}{%- endfor %}
    ]
  }
});
</script>

begin_checkout Event

Just above the Proceed to Checkout button add this code:

{% assign item_count = 0 %}

Add the following code as a parameter on the Proceed to Checkout button:

onclick="dataLayer.push({ event: 'begin_checkout', ecommerce: { currency: '{{ website.currency_code }}', value: '{{ cart.total | minus: cart.shipping }}', items: [{%- for orderline in cart.orderlines %}{ item_id: '{{ orderline.product.code | escape }}', item_name: '{{ orderline.product.name | escape_json }}', coupon: '{{ cart.promocode_code | escape }}', discount: {{ cart.discount }}, index: {{ item_count }}, item_brand: '{% snippet 'website/brand'%}', item_category: '{% if orderline.product.custom.google_category != blank %}{{ orderline.product.custom.google_category | escape_json }}{% else %}{{ orderline.product.category | escape_json }}{% endif %}', price: '{{ orderline.price | escape }}', quantity: '{{ orderline.quantity }}' }{%- if forloop.last == false %},{%- endif %}{% assign item_count = item_count | plus: 1 %}{%- endfor %}] } });"

purchase Event

Add the following code to the payment_success page, or the page the end user will land on when successfully completing an order.

<script>
    dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
    dataLayer.push({
      event: "purchase",
      ecommerce: {
        transaction_id: "{{ order.code }}",
        value: {{ order.total }},
        tax: {{ order.tax }},
        shipping: {{ order.shipping }},
        currency: "{{ website.currency_code }}",
        coupon: "{{ order.promocode_code }}",
        items: [
        {%- assign item_count = 0 %} 
        {%- for orderline in order.orderlines %}
        {
          item_id: "{{ orderline.product.code }}",
          item_name: "{{ orderline.product.name }}",
          {%- if order.discount != 0 %}discount: {{ order.discount }},{% endif %}
          index: {{ item_count }},
          item_brand: "{{ website.title }}",
          item_category: "{% if orderline.product.custom.google_category != blank %}{{ orderline.product.custom.google_category | escape_json }}{% else %}{{ orderline.product.category | escape_json }}{% endif %}",
          price: {{ orderline.price }},
          quantity: {{ orderline.quantity }}
        }{%- assign item_count = item_count | plus: 1 %}{%- if forloop.last == false %},{%- endif %}
        {%- endfor %}
        ]
      }
    });
</script>

Please note for the tax object. If you are a non-US storefront you want to replace the {{ order.tax }} code above with the following code and ensuring that you update the 1.15 with the correct VAT rate. 1.15 would be 15%.

{{ order.total | divided_by: 1.15 | minus: order.total | times: -1 | round: 2 }}