Github

large_IMG_0228.JPG

medium_IMG_0228.JPG

small_IMG_0228.JPG

thumbnail_IMG_0228.JPG

IMG_0228.JPG

### Introduction

This is an article from a series of articles about Google Analytics. If you want to know how to implement GA from scratch check 1st article: How to implement Google Analytics via Google Tag Manager. If you want to know how to implement e-commerce plugin check 2nd article E-commerce plugin in Google Analytics via Google Tag Manager.

### Problem with doubled events in statistics

Case nr 1

Problem with doubled events in statistics - when you see in analytics that some events are incomparably bigger and you have suspicion that they can be wrongly measured.

The source of the problem can lay in the fact that i.e. 2 events are tracking the same action - like add to cart - one event is for e-commerce plugin and a second event is a normal event. To avoid such mess in statistics you can change Non-Interactive Hit parameter in one of the events (in our case it was e-commerce event).
An important thing about the parameter Non-Interactive Hit - the default here is False but if you will have more advanced settings in GTM and maybe you will have more tags and triggers - then you can start to observe duplicated events in Google Console. So if you want to turn off tracking from tag set it to true.

![Screenshot_2021-11-05_at_12.12.50.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2021_11_05_at_12_12_50_a6e6e24d48.png)

### The user path is messed up

Case nr 2

The user path is messed up - when it looks like the user's path is switching between paid search and organic search in one session

When you see information that user comes from paid search and once from organic search in the same session it is clearly wrong. It is messing up the statistics and it is hard to evaluate paid ads - if they working or not. It was really hard to find the reason of this behaviour and the solution came by trial and error method.

![Screenshot_2021-12-27_at_09.02.48.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2021_12_27_at_09_02_48_97602fef28.png)
The source of the problem can lay in auto-tagging feature from Google.

 
To see more details about auto-taging see this page: [https://support.google.com/analytics/answer/2938246?hl=en#zippy=%2Cin-this-article](https://support.google.com/analytics/answer/2938246?hl=en#zippy=%2Cin-this-article)

For our case, what you have to know, is that it works in that way that in the collect requests (sending by google analytics automatically) GA is sending gclid paramter which keeps the information about the user. But when a user is visiting the page with gclid added i.e via paid ad - you have to make sure that you will not lose this id during the navigation through the shop. To do it you have to add to the events new parameters: pagePath and originalLocation.

```jsx

const location = useLocation();
const pagePath = location ? location.pathname || '' : '';

```

```jsx
const originalLocation = document.location.protocol + '//' +
                            document.location.hostname +
                            document.location.pathname +
                            document.location.search
```

![Screenshot_2021-12-23_at_15.18.27.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2021_12_23_at_15_18_27_b3c5836f55.png)

As you can see we are able to set in value variables {{originalLocation}} and {{Page Path}} - this is because they are added to GTM variables (if you don't know how to do it check 1st article from the series of Google Analytics).

And that's it - know you should see a nice user path.

![Screenshot_2021-12-27_at_09.02.28.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2021_12_27_at_09_02_28_c7e1b7d890.png)

Implementing GA on your own can give you a lot of flexibility but also requires you to solve few problems. Feel free to reach me if you have other problems related to GA or GTM - we can try to solve them together.

large_markus-winkler-IrRbSND5EUc-unsplash.jpg

medium_markus-winkler-IrRbSND5EUc-unsplash.jpg

small_markus-winkler-IrRbSND5EUc-unsplash.jpg

thumbnail_markus-winkler-IrRbSND5EUc-unsplash.jpg

markus-winkler-IrRbSND5EUc-unsplash.jpg

Examples of troubleshooting for Google Analytics and Google Tag Manager. You will see what common cases you may come across and how to deal with them.

2 most common issues with Google Analytics and Google Tag Manager

### Introduction

This article is a continuation of the article "How to implement Google Analytics via Google Tag Manager". If you want to know the basic configuration of Google Analytics, feel free to read it first.

In this article we will take a look at the very important  E-commerce plugin, which can be used to track the performance of the sales, conversion rate, and much more valuable KPI's.

![Screenshot_2021-12-27_at_09.17.08.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2021_12_27_at_09_17_08_c56c0b90c7.png)

### E-Commerce Plugin

Implementation from the code perspective is very easy - but you have to stick to some convention, which you can find here:
[https://developers.google.com/analytics/devguides/collection/ua/gtm/enhanced-ecommerce](https://developers.google.com/analytics/devguides/collection/ua/gtm/enhanced-ecommerce#purchases)

That means that you can't create any event you want ( you can do it with "normal" events which are described in the 1st article of the series). In E-commerce plugin you have only the following e-commerce events:

- Product Impressions
- Product Clicks
- Product Detail Impressions
- Add / Remove from Cart
- Promotion Impressions
- Promotion Clicks
- Checkout
- Purchases
- Refunds

In our case we use Product Detail Impression, Add to Cart, Checkout and Purchase - it is enough for our needs but you probably want to adjust those events to your needs.

I'll show the example of one event but remember that they differ a little bit so read carefully the documentation which I've provided above and check if you're sending events in the same shape as in the example in the docs.

### Code Implementation

So let's go with the e-commerce event!
I've chosen a checkout event for you because I want to show you also how you can adjust it to your individual needs and reflect the checkout process from your current shop.

```jsx

function onCheckout() {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
      'checkout': {
        'actionField': {'step': 1, 'option': 'Visa'},
        'products': [{
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
       }]
     }
   }
  });
}
```

This is the example from the docs. What I want to point here is the `ecommerce` key - it's crucial to make this work - because Google Tag Manager layer will try to find this key and push it further to Google Analytics to the plugin and not to the normal events. Actually, there is one general rule - keys are important and are not changeable - here you have `checkout` key and you can't name it in other way.

### Google Analytics settings

What's interesting in the checkout event is `actionField` - this key is used to send additional parameters to ecommerce events. In case of checkout, you can send what step of checkout it is - it can be "checkout page view", "Pay now button clicked" or whatever your process looks like. Additionally, you can name the steps in Google Analytics settings. Go to Admin → Ecommerce settings → Checkout Labeling section . You can add there as many steps as you plan to send from the code. Then you will see nice checkout behavior. (I have only one step so it does not look so impressive).

![Screenshot_2021-12-27_at_10.33.06.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2021_12_27_at_10_33_06_52fd08dfed.png)
![Screenshot_2021-12-27_at_10.33.29.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2021_12_27_at_10_33_29_7106f293f0.png)
![Screenshot_2021-12-27_at_10.34.18.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2021_12_27_at_10_34_18_2f6d58267a.png)

### GTM implementation

Ok, but how to make the e-commerce event to show in GA console in the first place. We have to use Google Tag Manager and create tags and triggers.
We start from Trigger - here we use CustomEvent and we name it as we want.

![Screenshot_2021-12-27_at_10.41.18.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2021_12_27_at_10_41_18_44efc3b266.png)

Then we're moving to set up the tag - here we need to let the Google Tag Manager know that we expect e-commerce event. To do that we have to check the checkbox Enable overriding settings in this tag and then check e-commerce section:

![Screenshot_2021-12-27_at_10.40.54.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2021_12_27_at_10_40_54_edc81590e7.png)
![Screenshot_2021-12-27_at_10.40.37.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2021_12_27_at_10_40_37_ce816e06ff.png)

The first part is less important - here you can name the Tag as you want. If you already have "normal event" add to cart you probably want to check Non-Interaction Hit as true. For more details with Non-Interaction Hit option check GA Trouble shooting article from this series. And if you have a problem with user path related to organic search vs paid search check GA Trouble shooting article from this series.

E-commerce plugin is a powerful tool and we have a lot of options to measure the performance of our shop.

large_stephen-dawson-qwtCeJ5cLYs-unsplash.jpg

medium_stephen-dawson-qwtCeJ5cLYs-unsplash.jpg

small_stephen-dawson-qwtCeJ5cLYs-unsplash.jpg

thumbnail_stephen-dawson-qwtCeJ5cLYs-unsplash.jpg

stephen-dawson-qwtCeJ5cLYs-unsplash.jpg

Continuation of the complete guide how to connect google analytics with your website. In this article you will learn how to connect your website with E-commerce plugin and get access to powerful statistics.

E-commerce plugin in Google Analytics via Google Tag Manager

### Introduction

Implementing analytics from scratch could be problematic especially when your app is already integrated with google tag manager and it would be expected to use this tool to send analytic events via this tool. In most e-commerce solutions analytics are handled by external services.
Together with GTM comes a need to make some configuration in Google Tag Manager console - and this in my opinion can be the most tricky part. We have to ensure that our analytic events will be captured and properly guided to the Google Analytics Console.

### Code Implementation

Starting from the beginning, here is the setup for Google Tag Manager.


```jsx
<script>
  dataLayer = [];
</script>
<script>
	(function(w,d,s,l,i){
		w[l]=w[l]||[];
		w[l].push({
			'gtm.start':new Date().getTime(),
			 event:'gtm.js'
		});
		var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),
				dl=l!='dataLayer' ? '&l='+l : '' ;
		j.async=true;
		j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
   })(window,document,’script’,’dataLayer’,YOUR_GTM_ID_HERE>)
</script>
```

Probably you want to put it somewhere in your template file in `<head></head>`

And from this moment you have access to window.dataLayer object where you can pass your analytic events. An easy example for custom Event:

```jsx
window.dataLayer.push({
	event: ’ShopEvent’,
  eventCategory: ’add to cart’,
  eventLabel: ‘product-12345’,
  eventAction: ’click’,
  eventValue: 127.00,
});
```

The work from the code perspective is basically done. Now we have to set it in Google Analytics Console.

### GTM Implementation

If there is no analyst who is experienced with GTM and GA configuration then it will be your responsibility to set it properly.

Why do we have so many options and types in Google Tag Manager? GTM is very powerful and allows to provide integrations with Facebook, Google Ads, Bing, Criteo and a lot of more tools (mostly for marketing but not only). It allows injecting some html into the web page where GTM is configured. It can track page route changes. You can use it to AB tests, to Google Optimize - so that’s why this setup is so complex and that’s why we have to tell GTM exactly what we want and how we want to use the data from dataLayer.

In our configuration we'll start from the bottom, so from the smallest thing - the variables - what are variables in Google vocabulary? This is all we want to use inside GTM - in our example variables would be properties sent in the `push` method. Example: `eventCategory` - if we want to pass this further we have to transform it into GTM variable. How to do it?

Go to the variables tab and you’ll see there two sections: :"Built-in variables" and "user-defined variables". What you need is "user-defined variables", because we’re adding here some custom variable as `eventCategory`. This setup is very intuitive, one thing you have to remember is to use the type “Data Layer Variable”.


![Untitled.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Untitled_e5fca45742.png)

Let’s do this for all the variables we send from code (expect `event` - I'll explain it later).

Now we can move to operation - create Trigger, which will be responsible to watch dataLayer and react when some analytic event will meet the condition, which we’ll create in a second.

![Untitled-2.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Untitled_2_6911ff01ba.png)

Creating Trigger is also very easy - here you have to choose “Custom Event” as a Trigger Type. What we want to check is the name of the analytic event so we need to compare the value of `event` in our code with this one specified in trigger. Let’s remind our code which we send:

```jsx
window.dataLayer.push({
	event: ’ShopEvent’,
  eventCategory: ’add to cart’,
  eventLabel: ‘product-12345’,
  eventAction: ’click’,
  eventValue: 127.00,
});
```

So our analytic event name is “ShopEvent” - notice that we didn’t have to define variable `event` it’s a default variable so we can use it right away in the Trigger.

Okey, we have variables, trigger - now the most important thing. The brain will combine this all and pass it further to the Google Analytics console - so to our desired destination.

![Screenshot 2021-11-05 at 12.12.50.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2021_11_05_at_12_12_50_45c4522158.png)

While Creating a Tag we have to provide where our Tag should provide - in our case to Google Analytics - that’s why we use Google Analytics: Universal Analytics as a type here. Track type is an event - as we declared in a trigger that we will use for this purpose CustomEvent. Then we have 4 values accessible parameters - we can use here variables or provided static text.

Under Tag setup we have a place to choose which Trigger we want to set for this tag (Triggering section) - it can be multiple triggers - but in our case, it will be only ShopEvent trigger.

### Google Analytics console

And now we have the setup complete - let’s see in Google Analytics Console if it is captured correctly.

![Untitled-4.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Untitled_4_0a792578e0.png)

You can check it in Behavior → Events → Top Events section. At the first glance, you see an event category but if you click on the 1. position you will see the event action and then the event label - so you can adjust it to your needs.

### DataLayer tool

You can also check what analytic events are sent to GTM in very simple way with DevTools in your browser. Just type window.dataLayer and you'll see all events sent to GTM - How you can see to GTM are sent a lot of analytic events and we will not use all of them - that's why we need Tags and Triggers which we were setting above - they are instruction which analytic events are important for us and what we want to do with those events (send to GA, connect with Facebook Ads etc).

![Screenshot 2022-01-03 at 10.24.01.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2022_01_03_at_10_24_01_2a5e52ce2c.png)

Between first and second call of window.dataLayer I've added something to the cart on the web - that's why the number of analytic events is doubled. Add to cart event is also tracked.

![Screenshot 2022-01-03 at 10.24.28.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2022_01_03_at_10_24_28_6528a8b26a.png)

It's very helpful tool, especially in debugging where you can check if event is sent correctly - if yes - then Google Tag Manager console is your next step to check if everything is set properly.

I hope that provided guide will help you in integrating Google Analytics events through the Google tag Manager. Remember that you can implement google analytics directly in your code  and you don’t have to use Google Tag Manager middleware for this - but in a case when you plan to use GTM in other areas, it is wise to implement it in this way because then you can extend google tools in an easy way.

In the next article I’ll write how to set up the ecommerce plugin and use it to measure your shop performance.

large_agence-olloweb-qfp4-Ud6Fyg-unsplash.jpg

medium_agence-olloweb-qfp4-Ud6Fyg-unsplash.jpg

small_agence-olloweb-qfp4-Ud6Fyg-unsplash.jpg

thumbnail_agence-olloweb-qfp4-Ud6Fyg-unsplash.jpg

agence-olloweb-qfp4-Ud6Fyg-unsplash.jpg

Complete guide how to connect google analytics with your website via Google Tag Manager. You will see step by step how you can integrate Google analytics and what you should do in your code but also in GA console and in GTM console.

How to implement Google Analytics via Google Tag Manager

Kasia's blog

Kasia Bernad

2 most common issues with Google Analytics and Google Tag Manager

E-commerce plugin in Google Analytics via Google Tag Manager

How to implement Google Analytics via Google Tag Manager