> For the complete documentation index, see [llms.txt](https://help.pixfizz.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pixfizz.com/seo-and-marketing/setup-ga4-ecommerce-analytics.md).

# 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

<https://tagassistant.google.com/>

#### 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 %}
  ]
});
```