Setup GA4 eCommerce Analytics

This guide will walk you through the steps to add the required code to your Pixfizz CMS in order to track valuable eCommerce-related events.

PreviousDynamic Design Previews NextStructured Data

Last updated 9 months ago

Setup GA4 eCommerce Analytics

This guide will walk you through the steps to add the required code to your Pixfizz CMS in order to track valuable eCommerce-related events.

Useful Tools to Test

Before you begin: Add your Google Tag

Replace "TAG_ID" in example below with your tag ID

<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'TAG_ID');
    </script>
</head>

View Item Event (gtag.js)

Add the below code to all product pages where a single product is being viewed. Be aware that there is a custom field referenced, which may be different in your admin.

gtag("event", "view_item", {
    currency: "{{ website.currency_code }}",
    value: {{ product.price }},
    items: [
    {
      item_id: "{{ design.code }}:{{ product.code }}",
      item_name: "{{ design.name | escape_json }} {{ product.name | escape_json }}",
      item_brand: "{{ website.title | escape_json }}",
      item_category: "{% if product.custom.google_category != blank %}{{ product.custom.google_category | escape_json }}{% else %}{{ product.category | escape_json }}{% endif %}",
      in_stock: true,
      price: {{ product.price }},
      quantity: 1
    }
    ]
});

View Cart Event (gtag.js)

Add the below code to the cart page.

gtag("event", "view_cart", {
  currency: "{{ website.currency_code }}",
  value: {{ cart.total }},
  items: [
    {%- for orderline in cart.orderlines %}
    {
      item_id: "{{ orderline.design.code }}:{{ orderline.product.code }}",
      item_name: "{{ orderline.design.name | escape_json }} {{ orderline.product.name | escape_json }}",
      {%- if cart.promocode_code %}
      coupon: "{{ cart.promocode_code }}",
      discount: {{ cart.discount }},
      {%- endif %}
      index: {{ forloop.index0 }},
      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 }}
    }{%- if forloop.last == false %},{%- endif %}
    {%- endfor %}
  ]
});

Add to Cart Event (gtag.js)

Add the below code to the account_saved_projects page within the for loop for projects. On the button to add the project to cart, you also need to add an id, like the example below.

<button id="add_to_cart_{{ project.id }}">

document.getElementById("add_to_cart_{{ project.id }}").addEventListener("click", function () {
gtag("event", "add_to_cart", {
  currency: "{{ website.currency_code }}",
  value: {{ project.product.price }},
  items: [
    {
      item_id: "{{ project.design.code }}:{{ project.product.code }}",
      item_name: "{{ project.design.name | escape_json }} {{ project.product.name | escape_json }}",
      index: 0,
      item_brand: "{{ website.title }}",
      item_category: "{%- if project.product.custom.google_product_category != blank %}{{ project.product.custom.google_product_category | escape_json }}{% else %}{{ project.product.category | escape_json }}{%- endif %}",
      price: {{ project.price }},
      quantity: 1
    }
  ]
});
});

Remove from Cart Event (gtag.js)

Add the below code to the cart page within the for loop for orderlines. On the button to remove the orderline, you need to add an id, like the example below.

<button id="remove_from_cart_{{ orderline.id }}">

document.getElementById("remove_from_cart_{{ orderline.id }}").addEventListener("click", function () {
  gtag("event", "remove_from_cart", {
    currency: "{{ website.currency_code }}",
    value: {{ orderline.price }},
    items: [
      {
        item_id: "{{ orderline.design.code }}:{{ orderline.product.code }}",
        item_name: "{{ orderline.design.name | escape_json }} {{ orderline.product.name | escape_json }}",
        index: 0,
        item_brand: "{{ website.title }}",
        item_category: "{%- if orderline.product.custom.google_product_category != blank %}{{ orderline.product.custom.google_product_category | escape_json }}{% else %}{{ orderline.product.category | escape_json }}{%- endif %}",
        price: {{ orderline.product.price }},
        quantity: {{ orderline.quantity }}
      }
    ]
  });
});

Begin Checkout Event (gtag.js)

Add the code below to the checkout page.

gtag("event", "begin_checkout", {
  currency: "{{ website.currency_code }}",
  value: {{ cart.total }},
  items: [
    {%- for orderline in cart.orderlines %}
    {
      item_id: "{{ orderline.design.code }}:{{ orderline.product.code }}",
      item_name: "{{ orderline.design.name | escape_json }} {{ orderline.product.name | escape_json }}",
      {%- if cart.promocode_code %}
      coupon: "{{ cart.promocode_code }}",
      discount: {{ cart.discount }},
      {%- endif %}
      index: {{ forloop.index0 }},
      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 }}
    }{%- if forloop.last == false %},{%- endif %}
    {%- endfor %}
  ]
});

Purchase Event (gtag.js)

Add the below code to the payment_success page.

gtag('event', 'purchase', {
    transaction_id: "{{ order.code }}",
    value: {{ order.total }},
    currency: "{{ website.currency.code }}",
    shipping: {{ order.shipping }},
    items: [
    {%- assign lines = order.orderlines | page_size: order.orderlines.size %}{%- for line in lines %}
    {
    item_id: "{{ line.design.code }}:{{ line.product.code }}",
    item_name: "{{ line.design.name | escape_json }} {{ line.product.name | escape_json }}",
    {%- if order.promocode_code %}
    coupon: "{{ order.promocode_code }}",
    discount: {{ order.discount }},
    {%- endif %}
    index: {{ forloop.index0 }},
    item_brand: "{{ website.title }}",
    item_category: "{%- if line.product.custom.google_category != blank %}{{ line.product.custom.google_category | escape_json }}{% else %}{{ line.product.category | escape_json }}{%- endif %}",
    price: {{ line.price }},
    quantity: {{ line.quantity }}
    }{%- if forloop.last == false %},{% endif %}{%- endfor %}
  ]
});