2022
Tracking

Tracking - Rules | Tools | Implementation

Translated from German using DeepL.

Date: Oktober 2022
Reading time: 9 minutes

In this post, I'll show you how to integrate tracking into your website and evaluate the results. I explain what tools are available and how to implement Google Analytics and the tag manager.
I also explain which data protection regulations apply when you use such tracking tools.

Legal provisions

Before you start tracking the users of your website, you need to understand what the legal regulations are. If you do not comply with them, will be fined in the event of a complaint.

In Switzerland, you must comply with Art. 13 of the Federal Constitution (opens in a new tab) and the Data Protection Act (DSG) (opens in a new tab). The details are regulated in the Ordinance (VDSG) (opens in a new tab). The Civil Code (opens in a new tab) shows how action can be taken in the event of an infringement. These laws are mainly concerned with protecting personal data. However, there are no strict rules regarding tracking and the use of cookies. tracking and the use of cookies. A Swiss website is therefore not obliged to display a cookie banner.

The EU, on the other hand, has to adhere to stricter regulations. Its General Data Protection Regulation (DSGVO) (opens in a new tab) outlines these. It is important to note that Swiss companies may also be affected by this regulation. One of these three cases must apply:

branch

services

customers

Source: https://www.edoeb.admin.ch/edoeb/de/home/aktuell/rgpd-last-minute.html (opens in a new tab)

Types & tools

As a rule, a distinction is made between traffic, behavior and performance tracking methods.
(There are also overlaps between these).

Traffic

Page views are collected here. The aim is also to find out how long users browse and whether they become customers.

Matomo

Website: https://matomo.org/ (opens in a new tab)

Matomo is an open source traffic tool. It advertises itself as having data protection advantages over other tools.
The free version must be self-hosted. This has advantages, but is also associated with effort.

matomo

Google Analytics

Website: https://analytics.google.com/ (opens in a new tab)

Probably the best-known tool measures the number of users, locations and other interesting information.

ga

Behavior

The aim of this tracking is to measure the user experience. To do this, you track how the user behaves. For example, clicks and scrolls are saved. Often a heat map is also created. This then shows where the user spent the most time with the mouse during their entire visit and which regions they did not use. and which regions they did not visit.

Hotjar

Website: https://www.hotjar.com/ (opens in a new tab)

With the help of heatmaps and session recordings, user behavior can be optimally collected.

hotjar

Google Optimize

Website: https://marketingplatform.google.com/about/optimize/ (opens in a new tab)

Google Optimize can be used to improve user-friendliness. It is possible to deliver several variations of a page for the respective target group. target group. You can also carry out content tests to find the best-performing design.

optimize

Performance

The speed, keyword rankings and SEO values are measured here. The aim is to recognize how the website is performing.
(Example: How well Google rates and lists the page).

Google Search Console

Website: https://search.google.com/search-console/about (opens in a new tab)

This is an SEO tool. It allows you to measure SEO performance and check the speed.

gsc

Mixpanel

Website: https://mixpanel.com/ (opens in a new tab)

Mixpanel analyzes mobile and web performance, among other things. One example of this is user retention. (User retention, also known as customer retention rate, provides information on how many customers can be retained).

mixpanel

Implementation education.merkleinc.ch

My task was to track the education website.
First of all, I had to answer the following questions:

What do we want to know? What kind of tracking should be used?
We want to find out how many users are accessing the site and from where. We also want to understand how the website is used. In this way we can also recognize whether people inform themselves about this page and possibly even advertise.

Which tool is best suited?
Google Analytics (opens in a new tab) is an excellent tool for tracking traffic. For example, we can use it to find out which pages are performing best and what kind of users use the site.
To record the behavior, we also decided to use Google Tag Manager (opens in a new tab). But more on that in a moment.

What about data protection?
At the moment, the Merkle privacy policy is linked. There is no obligation to do so. However, it is advisable to point this out to users. Google Analytics is already mentioned in this statement.
As we do not have to comply with the DSGVO, this is sufficient for the time being. However, we are considering adding a cookie banner at a later date.

Google Analytics

Integration

To integrate GA into a website, you must perform the following steps:

  1. create a Google account
  2. visit the website: https://analytics.google.com/analytics/web (opens in a new tab)
  3. enter your account details
  4. add stream
    1. name
    2. URL
  5. copy tag
  6. insert tag in the header of the website

This is the day:

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

After these steps, data is already being collected. However, with GA it can take 24 to even 48 hours for data to be displayed.

Possibilities

With Google Analytics you can find the views, most important pages and demographics. But you are not limited to this. With the help of the gtag.js (opens in a new tab) it is possible to track events. By adding small snippets of code, you can send information to GA with every action on the website.

Google Tag Manager

The gtag.js has a few disadvantages. It is not so easy for untrained people to write code. And after every change, the website has to be must be deployed to the server again.
GTM is a simpler and more efficient way to manage tags. These can be created via a UI and deployed directly without having to change the having to change the source code of the website.

Link with GA

To link the existing GA with the GTM, the following steps must be carried out.

  1. Open GTM from GA
    open
  2. Create account
  3. Replace the GA snippet in the source code with the GTM
    views/_partials/head.hbs
    {{! Google Tag Manager }}
<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','GTM_TRACKING_ID');</script>
{{! End Google Tag Manager }}
    This is because the data should now only be collected via the GTM.
  4. Add GTM iframe in each body
    views/_layouts/default.hbs
    {{! Google Tag Manager (noscript) }}
<noscript><iframe
        src='https://www.googletagmanager.com/ns.html?id=GTM_TRACKING_ID'
        height='0'
        width='0'
        style='display:none;visibility:hidden'
    ></iframe></noscript>
{{! End Google Tag Manager (noscript) }}
  5. Create configuration tag
    tags
    The measurement ID can be found in the Analytics Admin view.
    measurement
    Select All Pages as the trigger. This will inform GA every time a page is accessed.
    trigger
    This is what sends data to GA in the first place.
  6. Test changes
    It is then best to test whether the trigger is fired. To do this, open the page in the preview and then view the evaluation.
    (This is executed with the https://tagassistant.google.com/ (opens in a new tab).)
    test
  7. Submit changes

Tags and triggers

To track actions, you can then define additional triggers. To do this, proceed as follows.

  1. Define trigger
    To do this, select a trigger type. The activated built-in variables appear here.
    trigger-define
    Additional functions can also be activated if required. functions
  2. Define tag
    Here you select the trigger and define what should happen when it is triggered.
    The tag type is defined as Google Analytics: GA4 Event.
    You must also select the configuration that is to be sent when the trigger is triggered.
    In this case, the data is sent to GA when the button is clicked.
    tag-define
  3. Submit changes
    In order for the changes to be applied to the productive page, they must still be submitted.
    submit
    Here, too, it is advisable to view the functionality in preview mode and then examine the evaluation of the tag assistant.
    To ensure the link to GA, you can check whether the events are visible in the DebugView.
    This is because the changes in the productive system are only visible the next day.
    debug

Analysis/evaluation

As a rule, the first newly defined data is received 24 hours after implementation. Now you need to know how to analyze it.

Home

The home page provides an overview of all data.

dashboard

Reports

More detailed views are displayed under Reports. There you can see

  • Users
  • New users
  • Average time on the page
  • Users in the last 30 minutes
  • Where the users come from (direct, organic search, referral)
  • Countries
  • User activity
  • Retention
  • Views per page
  • events
  • Conversions & Purchases

Some suitable evaluations are already displayed by default. However, all these reports can be customized as desired.

report

Real-Time

Real-Time provides an overview in real time.

real-time

Life Cycle

Reports from this area show how users use the site. They show how the page was opened and which events were triggered.
E-commerce websites can also view the turnover they have achieved here.

events

Custom

Further reports and collections can be compiled under Library. These are displayed under Custom.

overview

Explorations

Explorations can be used to display more complex data very graphically. There are already some templates. If required, these can also be be edited if required.

Path exploration

An example of this is this path exploration display. It can be used to track which paths a user takes on the application.
This is helpful in order to recognize how often he moves how and where. You can also see whether pages are viewed and found.

users

User exploration

This template can be used to study individual users in detail. You can see the time spent and the actions performed.

explorer

Safari

During testing, I wondered whether information is received when the user uses Safari. Apple added a feature to the browser that was supposed to protect users from trackers. In their presentation, it sounded as if GA was being blocked.
But this is not the case. A few features are blocked. However, GA can still use all basic data.

education

Cookie Disclaimer

As described above, we do not need to include a cookie disclaimer. However, we will do so anyway for two reasons:

  1. The rules might change in the future. We already have one.
  2. Safari users might get the impression that we want to track them secretly.

Conclusion

In Switzerland, we are allowed to enjoy some legal freedoms. For once, we do not have to display a cookie disclaimer. Nevertheless, you should informed so that you know what adjustments need to be made if the law changes.
To track a website, I described the traffic, behavior and performance methods and gave examples.
I also explained how to implement and configure GA and GTM. This guide is very helpful, because most of the descriptions on the internet on the Internet are outdated and do not work in GA4.
After showing the many evaluation options in GA, I presented the options for cookie disclaimers.

I learned a lot of new things about these topics. In my opinion, it is exciting how quickly you can track a website. Especially the GTM, which was completely new to me, is enormously helpful.