> 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/ecommerce/google-analytics-cliend-side.md).

# Google Analytics - Cliend-side

Add GA4 Client-side 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.

```javascript
<!-- 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

```javascript
<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

```javascript
<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

```javascript
<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

```javascript
<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.