Google Analytics 4: a counter, events, key events

A counter (Google Analytics 4, Matomo, Yandex Metrica) is JavaScript that reports visits, page views and events. A goal is an important event, like a lead.

How to know what happens on a site

In the last lesson you wrote hypotheses. To test them you need a tool that counts what people do on your site. Such a tool is called a counter (or a web analytics system). It’s a small piece of JavaScript that you paste into the pages. When a person opens a page, the code sends the service’s server a short message: “such-and-such page opened, from such-and-such device, they came from there”. The service adds up the messages and shows reports.

The counters you’ll meet most often:

• Google Analytics 4 (GA4). Google’s free service and the most widespread in the world. It understands the UTM tags from the lesson on social networks and works with Search Console and Google Ads. For most English-language projects it’s the default choice.
• Privacy-friendly alternatives such as Matomo, Plausible and Fathom. They collect less, some work without cookies, and some can be hosted on your own server. They suit a site whose audience is wary of tracking, or one that wants to avoid a consent banner (more on that in the lesson on the ethics of analytics).
• Yandex Metrica. Yandex’s free service, widely used in Russian projects, with its own tags and its own Webvisor. If your audience is in Russia, it’s the usual choice, often beside Google’s.

The principle is the same for all of them, and the differences are in the words and in how some numbers are counted (the next lesson is about that). You don’t need two counters: for a small site one is enough, and it must count honestly.

Where it comes from. The first visit counters of the 1990s were just a number at the bottom of a page, which you read about in the lesson on 1996. Real web analytics appeared when companies began analyzing servers’ request logs and then added JavaScript tags. Google released Analytics in 2005 after buying the company Urchin (you heard the name in the lesson on UTM). GA4 replaced the earlier version, in which the “session” was central, with an “everything is an event” model; Universal Analytics stopped processing data in July 2023.

Installing: once and in one place

The service gives you the code when you create the counter. In GA4 it looks like this (the id is a placeholder):

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

The first line loads Google’s tag from its server. The script below it creates the gtag function, which puts messages in a queue, and gtag('config', ...) switches the counter on with your id. GA4’s “enhanced measurement” then records page views, scrolling to the bottom of a page (the scroll event at 90%), clicks on outbound links, file downloads, site search and some video plays without any further code.

In Yandex Metrica the code is longer and its start-up call is ym(12345678, "init", {...}); if your audience is in Russia, you’ll see it in its documentation.

The rules of installation are the same for both:

1. In the head of every page, so that the counter starts as soon as the page opens and doesn’t lose quick exits.
2. Exactly once. A duplicate doubles page views. Open the page’s source and search for the word config or init: it should appear once.
3. On all pages, the “Thank you” page included (that is where you’ll count the goal).
4. Not on a local copy for tests, or your own clicks will get into the statistics. It’s better to create a separate property for testing.

If the site is made in a builder or a CMS, the code goes not in a file but in settings. In Wix it’s under Settings and Custom Code, or its Google Analytics integration; in Squarespace, under Settings, Developer Tools and Code Injection (or its built-in Google Analytics field); in WordPress, into the theme header (best of a child theme) or with a plugin that inserts code, such as Google’s Site Kit; in Shopify, through its Google channel. Names of sections change from version to version, so check the help of yours.

What a counter counts

Four words to tell apart, because in reports each means its own thing.

• A visit (in GA4 a “session”): one coming of a person. A series of their actions counts as one visit until the person goes quiet; after a pause (30 minutes by default in GA4, and you can change it) the next coming counts as a new visit.
• A page view: one page loaded. There can be several in a visit.
• An event: any action the page reported to the counter. A scroll, a click, a video play. In GA4 a page view is an event too (page_view).
• A goal (in GA4 a “key event”): an event you named important for the project. A lead, a call, a download.

Open the diagram and try it. Press what a visitor can do, and see how the counter turns it into records. Then switch on a duplicate of the code and switch off the guard against repeats, and you’ll see the two commonest mistakes.

the counter code is on the page the code is pasted twice a guard against sending the goal again Session recording

Open the page Scroll to 50% Tap the phone number Send the form Reset

Visits 0 Page views 0 Events 0 Goals 0

Everything adds up: one action, one record.

The counter is invented and sends nothing anywhere: the log lives only in this diagram.

An event through JavaScript

There are different kinds of goals: opening a page (such as “Thank you”), the number of pages per visit, time on the site, a compound goal in steps. The most flexible and the commonest is a JavaScript event: the page itself tells the counter that the person did something important. In GA4:

gtag('event', 'generate_lead');

The first word says that this is an event, and the second is the event name. generate_lead is one of GA4’s recommended events for lead generation; if there’s no recommended name for what you count, you invent a name of your own. Then in GA4 you mark the event as a key event. In Yandex Metrica the same thing is ym(12345678, 'reachGoal', 'lead_submit'), where the goal name must match, to the letter, the one you enter when you create a goal of the type “JavaScript event”.

When to fire it. On the person’s action, not when the page opens: when a form is submitted (the submit event of the form; you read about events in the part on JavaScript), when a phone number is tapped, when a booking is made. If the form goes without reloading the page, fire the event when the server has answered “success”, not when the button is pressed: otherwise failed submissions get into the goal too (you know about the server’s answer from the part on HTTP: code 200 or an error).

Once per action. A person can press a button twice, the page can redraw, a handler can get attached twice. So the event is guarded: a flag variable (“already sent”) or a handler that runs once ({ once: true }). Without it conversion grows by itself, and you make decisions on false numbers.

Don’t send personal data in an event. The event name and parameters must be technical: lead_submit, not a person’s name or phone number. A counter isn’t a place to keep contacts (for that there’s the form and your email). Google’s terms for Analytics forbid sending personally identifiable information to it.

What to call it. You already agreed on a scheme in the lesson on the value ladder: object_action, in Latin letters, lowercase, one name for good.

Checking: does it really fire

After setting up, always check.

1. In GA4, open the DebugView report (or the Realtime report) and, on your site, the browser console (you met the developer tools at the start of the course). DebugView shows each event your test visit sends.
2. Do the action yourself. One record of the event should appear.
3. Repeat the action. A second record shouldn’t appear.
4. In a day or so the event shows in the service’s reports (reports lag a little; Realtime does not).
5. Don’t forget to remove test visits from the statistics, for example with a filter on your own address.

The plan of events

Before setting events, make a plan of events: a short table giving each event’s name, when it fires, how it’s guarded against repeats and what it’s called in the other counter. It’s a cheap way not to get muddled in six months. Start with the main action from the brief and one or two steps toward it (a tap on the phone, scrolling down to the proof).

Data, law and honesty

A counter gets data about people: the page address, time, device, the source of the visit, cookies and the IP address. Combined with other information such data can count as personal, and privacy law requires you to tell the person and explain the purpose. A guideline for today (not legal advice, and your lawyer should check):

• In the privacy notice you must say which services you use, what data they collect and why (you’ll write such a paragraph in the practice).
• Don’t collect more than you need. Don’t switch on session recording where it isn’t needed, and don’t pass names and phone numbers into events. The next lessons of the part are about that.
• Consent and a cookie notice. In the EU and the UK, the ePrivacy rules (PECR in the UK) generally require consent before analytics cookies are set, apart from narrow exemptions that some regulators allow for strictly limited audience measurement; in the US there’s no general cookie-consent law, but state privacy laws (California’s, for example) require notice, and a way to opt out of the “sale” or “sharing” of data when advertising features are on. How to make a banner that doesn’t deceive you’ll learn in the lesson on the ethics of analytics.
• Where the data goes matters too: GDPR has rules for transferring data outside the EU, and regulators have taken different views of Google Analytics over the years. Check the current position, and see the lesson on data protection.
• For Russia, the personal data law (152-FZ) makes a similar demand of the policy, and it sets stricter rules on where data is stored; the Russian edition covers it.

Check yourself: why must the “lead” event be protected from being sent twice?

A person can press the button several times, and one action turns into several records. Conversion grows for no good reason, and decisions are made on false numbers.

Practice

Finish the page and the plan.

1. The counter code in the head: the Google tag loader and the gtag('config', ...) call, once.
2. The event at the end of the body: on form submission gtag('event', 'generate_lead') is called, but no more than once per action.
3. A plan of events of two rows: the name, when it fires, the guard, the name in GA4. The main action from the brief is named in the same words.
4. Where the code goes in Wix, Squarespace and WordPress.
5. A paragraph for the privacy notice with the service, cookies and the IP address.

The check looks that the code is there and only once, that the event is sent with a guard, that the plan has correct names and that the policy is complete. Whether it works on a live site, debug mode will show: check it yourself, as described above.