How To Collect 100% of Google Analytics Events on Your Website

Did you know that Google Analytics is used by over 50% of the web? That's tens of millions of websites!

So, chances are that your website uses Google Analytics too, and you want to leverage its data and reporting capabilities to make informed decisions about your site, content roadmap, product, and business future.

If that's the case, I invite you to keep reading this hands-on tutorial and learn more about why and how to collect 100% of web interactions on your website.

But I Thought I Was Already Collecting 100% of Web Interactions?

Unfortunately, that's not the case for most websites due to several limitations. These are core technological limitations that gradually became more and more impactful over the last 10 years. 

I am talking about three main causes:

#1 Privacy awareness and new regulations

An increasing number of countries have been adopting specific laws to protect consumer privacy, requiring user consent for data collection - which is a great improvement for consumers’ privacy.

A less obvious consequence is that fewer than half of visitors give full consent. According to recent studies, the average cookie consent rate is 31%. In other words, over two-thirds of your visitors aren’t accepting third-party cookies; therefore, their page views and events don’t actually make it to Google Analytics.

#2 Ad blockers

While specifically designed to block ads, ad blockers prevent website data collection by automatically blocking HTTP connections to popular analytics APIs such as Google Analytics.

Global adoption has risen from 3% to over 11% in the past decade. And looking at Europe and North America, ~50% of visitors use ad blockers.

In other words, ad blockers might block over 50% of your website interactions, especially if your target audience is technical and highly educated.

#3 Web performance & mobile adoption

Slow or unstable internet connectivity, often on mobile devices, can disrupt the data flow from the device to the tracking servers, resulting in an additional 10% data loss. As of 2024, almost 60% of global web traffic is generated by mobile devices, compared to less than 30% just 10 years ago.

On top of that, modern web frameworks don’t fully support older browsers for the sake of efficiency - which is good for the largest majority of visitors. On the other hand, it’s quite common to find popular websites with ~90% compatibility scores, resulting in additional data loss. At Edgee, we have witnessed extreme cases where a 10% compatibility gap caused over 40% of data loss.

Ok, so what can I do about it?

As a website owner or developer, it can be frustrating to realize you have little control over the three main causes of data loss we just discussed. You do need to remain compliant with data regulations and respect your users’ privacy. You can’t force your visitors to upgrade their browsers or avoid mobile browsing while providing a great user experience.

The good news is that there’s a way to remain compliant, respect users’ privacy, and avoid client-side limitations by using edge computing.

Edge Computing to the Rescue

Edge computing is a set of technologies and architectures that allow you to move computation and data storage closer to the user to reduce latency, compared to centralized data centers. Similarly, using edge computing allows you to shift computation away from the browser, between the client and the server, effectively bypassing limitations from ad blockers, cookies, mobile connectivity, and JavaScript compatibility.

Fortunately, tools like Edgee help organizations transform client-side SDKs like Google Analytics into WebAssembly components that run at the edge. This means you can remove the Google Analytics SDK from your website, and Edgee will take care of sending page views and custom events to GA, even before the page is served to the browser.

Technically, this involves a set of techniques to make sure that bots are automatically excluded and that ad blockers don’t intercept client-generated events.

Let’s see Edgee in practice

So far, so good! But how does it actually work? More importantly, how can you integrate Edgee into your website efficiently without spending countless hours or modifying your Google Analytics reports? Let me show you!

The steps below will not force you to provide a credit card or incur unexpected charges, as Edgee has a free tier.

You can get started with Edgee in 5 steps:

1. Create a new free Edgee account
2. Create a new Edgee project and set up your backend URL, such as https://youwebsite.com
3. Add a Google Analytics component to your project, choosing it from a list of ready-to-use components
4. Integrate the Edgee SDK in your HTML code and update events mapping
5. Integrate Edgee with your architecture (CDN-like)

Wait, why do I need a new client-side SDK?

Great question! The Edgee SDK acts as a bridge and replaces the JavaScript SDKs of all the components you’ve enabled for your project. In other words, the Edgee SDK allows our edge processing capabilities to kick in. When Edgee intercepts this script, it triggers analytics events and other services transparently and directly at the edge. 

The result? Real-time analytics without compromising your app’s performance. The edge compute logic runs in under 4 milliseconds for 99% of cases (99th percentile). Plus, the SDK lets you track client-side events such as button clicks or custom actions without reloading the page, communicating directly with Edgee, so it can’t be blocked.

Here’s what you need to add on your website:

<script id="__EDGEE_SDK__" src="<YOUR_SDK_URL>" async></script>

And if your front end is a React app, you can use the react-edgee package like this:

import EdgeeSdk from "react-edgee";
<EdgeeSdk src={"<YOUR_SDK_URL>"} />

Next, you need to update your JavaScript code to use the Edgee SDK instead of Google Analytics:

// from this:
gtag('event', 'button-click', {
    color: ‘blue
});

// to this:
edgee.track({
    'name': 'button-click',
    'properties': {
        color: ‘blue
    }
});

Similarly, if you are setting user-specific properties:

// from this:
gtag('config', '<tag_id>', {
  'user_id': '<user_id>'
});
// or this:
gtag('set', 'user_properties', {
  'user_id': '<user_id>',
  '<property_name>': '<property_value>',
});

// to this:
edgee.user({
    'user_id': '<user_id>',
    'anonymous_id': '<anonymous_user_id>',
    'properties': {
      '<property_name>': '<property_value>'
    }
});

For more complex integrations, check out how to configure your Edgee Data Layer on the server and how to automatically map cookie consent via the SDK or built-in integrations for tools such as Axceptio, Didomi, and OneTrust.

Migration strategies

Building a brand-new website is exciting and allows for experimentation without constraints. However, in most cases, you already have an established website with historical GA reports, optimizations, and valuable data. And you can’t afford gaps or duplicate entries in your analytics.

That’s why I recommend one of the following migration strategies. While they add some complexity, they allow for incremental testing, ensure reliability, and provide valuable insights along the way.

#1 Integrate and compare

This strategy is especially useful if you’re uncertain about the extent of your data loss. Is it 5%, 20%, or 50% of the total? Depending on the answer, you might decide to prioritize using a tool such as Edgee as soon as possible.

A great way to measure this is by integrating Edgee alongside your existing Google Analytics setup, using a new GA property within the same account. This allows you to run a proof-of-concept for a few weeks (one month is usually enough) and compare the two properties to quantify your data gap.

Implementation is straightforward, as you don’t need to modify your existing GA code. Simply integrate the Edgee SDK and add tracking snippets for page and custom events.

Once the experiment is complete and you’re ready to fully transition to edge analytics, you can move to the next strategy and phase out the old implementation.

#2 Integrate and replace

This strategy focuses on fully replacing the old JavaScript implementation in four steps.

First, you integrate the Edgee SDK and create a new Google Analytics component in your project, but keep it disabled.

Second, you disable the automatic pageview analytics like this:

gtag('config', '<tag_id>, {
  send_page_view: false,
});

Third, you prepare to deploy this code change and immediately activate the (inactive) component you configured in the first step. This ensures that no data is duplicated or lost.

Finally, you convert all the client-side tracking to the Edgee SDK. While you can do this incrementally, I recommend switching all events at once. This ensures a clean migration and lets you remove any redundant SDK, improving website performance.

On the Edgee docs, you’ll find an even more detailed migration guide to cover both architectural and code changes.

Summary and Takeaways

In this article, we explored the client-side challenges that prevent you from capturing 100% of website interactions.

Then, we introduced Edgee, a platform powered by edge computing that overcomes these challenges, giving you accurate data without sacrificing privacy or performance.

Last but not least, if you’re a developer and would like to learn more about how Edgee works under the hood or even find out how to integrate your own custom components, feel free to reach out on this useful community hub for debugging.

This space is evolving rapidly, and many exciting updates and new components are coming in 2025. In the meantime, we’re eager to learn more about your use cases and feedback!

For those looking to deepen their understanding of data-driven decision-making, check out Marketing Analytics for Business—a course designed to help you use analytics for smarter business strategies.