ESC

On this page

Features > Analytics

Why to Choose Google Analytics?

Numerous analytics tools exist, but Google Analytics remains an exceptional option. It offers a wide range of features that can assist you in comprehending your website's performance and user behavior.

Of course, there are other alternatives like Fathom and Simple Analytics that might be simpler to set up initially. However, we want to ensure that you can benefit from the robust features of Google Analytics and easily integrate third-party tools, trackers, and plugins if you decide to explore more advanced functionalities. Therefore, we have simplified the process of integrating Google Analytics into your project instead of restricting your options in the future.

Setup

Google Tag Manager:

1. Firstly, sign up to create a Google Tag Manager account. After that, set up a new container for your website and follow the provided instructions to obtain your Google Tag Manager ID.

2. Then, inside your [Accounts] tab, click on [+ Create account].

3. On the create account page, fill out your Account Name , Country and Container name. Then, click on the target platform(Web). Then click on [Create].

4. After creating the container, you'll be directed to the container page. Near the top of your workspace window, locate your container ID, which is a string in the following format: GTM-XXXXXXX.

🗒️ Google Tag Manager

Google Tag Manager is a tool that enables you to efficiently update tags and code snippets on your website. With it, you can easily add and update various tags like Google Analytics, Facebook Pixel, and more without needing to directly edit your website's code.

Google Analytics:

1. Create a Google Analytics account.

2. Create a new property under your [Admin] tab, click on Create Property. for your website, Next, add a data stream for your website by entering your website URL.

3. Once you have created your property and entered your data stream, search for your Measurement ID in the Search bar and copy it. It should be in the format of G-XXXXXXX.

We'll utilize this Measurement ID to connect Google Analytics with Google Tag Manager.

Connecting Google Analytics to Google Tag Manager

1. Go to your Google Tag Manager account and select your container.

2. Click on Tags and then click on New to create a new tag.

3. Go to Tag Configuration and click on Google Tag.

4. In Tag ID field, Paste the Measurement ID that you copied from Google Analytics.

5. Click on Triggering and select All Pages. This ensures that the tag activates on all pages of your website. Afterward, save your changes.

Congratulations on successfully linking Google Analytics to Google Tag Manager! 🎉 Now, let's start tracking your first events and include custom ones to monitor user behavior and enhance metrics. Understanding user actions is crucial for continuously enhancing your app's performance.

📌 Data

Making decisions based on data is the most effective approach. Let's proceed with setting up our first event within our Google Tag Manager account and learn how to integrate it into our NuxtStarter project. 🚀

Setting up Events

1. In your Google Tag Manager account, select your container.

2. Click on Tags and then go toNew to create a new tag.

3. Click on Tag Configuration and select Google Analytics: GA4 Event.

4. In Tag ID field, Paste the Measurement ID that you copied from Google Analytics.

5. Click on Triggering and select All Pages, This ensures that the tag is activated on all pages of your website. Afterward, save your changes.

1. Inside your NuxtStarter project, open the nuxt.config.ts file located in ./ and add your GTM ID.

/nuxt.config.ts

  ...
  gtm: {
    id: 'GTM-YOUR_ID'
  }
  ..
    

Create a custom event

Now, let's set up a custom event to monitor whether a user clicks on a specific button on your website. For instance, let's track when a user clicks on a checkout button.

1. Place the button you want to track and add an onClick event handler to it.

2. Inside the onClick event handler, push the event to the data layer like below:

/components/ButtonCheckout.vue

    const handlePayment = async () => {
      // custom proceed checkout event for Google Analytics
      (window as any).dataLayer.push({
        event: "proceed_checkout"
      });
    

3. In the Google Tag Manager container, click on Triggers and then click on New to create a trigger.

4. Click on Trigger Configuration and go to Custom Event.

5. In Event Name field, Enter the name of the event you wish to track. For instance, let's name it proceed_checkout.

6. Choose "All Custom Events" and save it.

6. Click on Tags and then proceed toNew to create a new tag.

7. Click on Tag Configuration and choose Google Analytics: GA4 Event.

8. In Tag ID field, paste the Measurement ID that was copied from Google Analytics.

9. Click on Triggering and Choose the trigger you previously created, and then save your settings.

Now, whenever a user clicks on the checkout button, the event will be added to the data layer and subsequently sent to Google Analytics.

The good news is that we've already integrated this custom event in the ButtonCheckout component. So, if you haven't already done so, be sure to check it out! 🚀