Step 3. Setting up ecommerce tracking of a Google Analytics 4 account

Copy the link to the article

Copied

After registering a Google Analytics 4 account, you should set up ecommerce tracking.

If you have already carried out such a setting, then you can skip to the item «Google Analytics 4 integration with the system». If the setting was made earlier for Universal Analytics, it will also work for GA4.

Learn how to set up ecommerce tracking in Google Help.

Getting a tracking code

The Google Analytics 4 tracking code is a JavaScript script that is run by the website visitor's browser. With the help of the tracking code, data about the visitor’s actions on the website will be sent to Google Analytics.

Read in Google Help how to get a tracking code.

Copy the entire tracking code from Google Analytics 4. Instead of G -XXXXXXXXX, the actual tracking identifier will be displayed.

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

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

Settings on the site

Next, you should add the tracking code to the site pages by copying it to all site pages before the closing </head> tag.

In order for Google Analytics to get information about completed orders, you should modify the tracking code by adding the order information to it on the page, that notifies the user about the order completion.

You only need to modify the code on the pages that the user sees after completing / confirming the order. Thus, the modified code should only work once for each new order.

Unlike the modified one, the regular tracking code must be executed every time you view the page where the code is added.

For the Google Analytics 4 module, you need to modify the tracking code by sending data about each order:

<script type="text/javascript">
gtag('event', 'purchase', {
     "transaction_id": '1234',                                          // Transaction ID
     "affiliation": 'example.com',                                  // Store name
     "value": 23.07,                                                              // Event value
     "tax": 1.24,                                                                    // Tax
     "shipping": 0,                                                                // Delivery cost
     "items":                                                                            // Array with products
     [{
         "id": "1234",                                                                  // Unique product identifier
         "name": "Mouse Logitech",                                          // Product name
         "category": "Wireless",                                              // Product category
         "quantity": 2,                                                                // Quantity of product units
         "price": '750'                                                                // Purchase price of the product
     }]
});
</script>

In this code, you can specify the fields in any sequence. Only the transaction ID is mandatory for the integration to work correctly. The field names must be set in small Latin letters, for example, category, not Category and not CATEGORY.

A complete list of possible fields can be found in the official documentation.

When sending the order data, you also need to record the visitor’s unique clientId into the special parameter created in step 2. To do this, add the following code:

function get_ga_clientid() {
  var cookie = {};
  document.cookie.split(';').forEach(function(el) {
    var splitCookie = el.split('=');
    var key = splitCookie[0].trim();
    var value = splitCookie[1];
    cookie[key] = value;
  });

  if ('undefined' === typeof cookie['_ga']) {return ''};

  return cookie['_ga'].substring(6);
}

gtag('set', {'analyticsCookieId': get_ga_clientid()});

Important!

The code that sends the clientId value should only be executed when sending the order data, and not on every page of the site.

When sending a transaction to Google Analytics, there may be difficulties with some orders (for example, a large number of product items). For advanced ecommerce all product data is embedded in a single request to Google Analytics (unless there is a special implementation of the request). The maximum HTTP request size supported by most browsers is 8192 bytes, and therefore requests longer than this size are not processed by Google Analytics.

Find more in the Google documentation.