Analytics

Add GA4 eCommerce tags - Pixfizz eCommerce CMS

In order to ensure that you have eCommerce data flowing into your Google Analytics account you need to place a few gtags on some pages throughout your storefront.

Google Tag

Firstly the Google tag that references your account must be placed on all pages, so it is recommended that you add it to the Layout.

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

  gtag('config', 'G-ABCDE12345');
</script>

Make sure you replace both locations where you see the 'ABCDE12345' with your account's id.

View Item event

<script>
gtag("event", "view_item", {
  currency: "{{ website.currency_code }}",
  value: {{ product.price }},
  items: [
    {
      item_id: "{{ product.code }}",
      item_name: "{{ product.name }}",
      index: 0,
      item_brand: "{{ website.title }}",
      item_category: "{{ product.category }}",
      price: {{ product.price }},
      quantity: 1
    }
  ]
});
</script>

Place this script on a global product page and/or snippet.

Add to cart event

<script>
gtag("event", "add_to_cart", {
  currency: "{{ website.currency_code }}",
  value: {{ cart.total }},
  items: [
{%- for orderline in cart.orderlines %}
    {
      item_id: "{{ orderline.product.code }}",
      item_name: "{{ orderline.product.name }}",
      price: {{ orderline.product.price }},
      quantity: {{ orderline.quantity }}
    }{% if forloop.last == false %},{% endif %}
{%- endfor %}
  ]
});
</script>

Place this script on your cart page.

Begin Checkout event

<script>
gtag("event", "begin_checkout", {
  currency: "{{ website.currency_code }}",
  value: {{ cart.total }},
  items: [
{%- for orderline in cart.orderlines %}
    {
      item_id: "{{ orderline.product.code }}",
      item_name: "{{ orderline.product.name }}",
      price: {{ orderline.product.price }},
      quantity: {{ orderline.quantity }}
    }{% if forloop.last == false %},{% endif %}
{%- endfor %}
  ]
});
</script>

Place this script on the checkout page.

Purchase event

<script>
gtag('event', 'purchase', {
  "transaction_id": "{{ order.code }}",
  "value": {{ order.total }},
  "currency": "{{ website.currency_code }}",
  "tax": {{ order.tax }},
  "shipping": {{ order.shipping }},
  "items": [
    {%- assign lines = order.orderlines | page_size: 1000 %}{%- for line in lines %}
    {
      "id": "{{ line.id }}",
      "name": "{{ line.product.name }}",
      "category": "{{ line.product.category }}",
      "quantity": {{ line.quantity }},
      "price": "{{ line.price }}"
    }{% if forloop.last == false %},{% endif %}{% endfor %}
  ]
});
</script>

Place this script on the payment_success or the confirmedorder page.