Google Analytics

GA4 DebugView 101: Everything You Need to Know

How to Enable & Set Up Debug View + Understand How it Can Impact Your Business

Main Image Courtesy of Voluum.

One of the most significant features of Google Analytics 4 (GA4) is the ability to view and analyze events from a specific browser or device. This feature is useful for those who are frequently involved in debugging and troubleshooting. After enabling debugging mode, you can use the navigation panel to view the events related to your device.

In debug mode, Google Analytics provides a real-time summary of your events. It can also analyze the details of your activities, such as the user properties and custom parameters you've specified. The report displays data from a specific gadget that has enabled debugging.

When you enable debugging mode on a device, the data collected will be sent directly to Google Analytics in real time. It's kept separate from the information collected by other devices and apps that do not have a debug mode enabled.

In normal mode, Google Analytics will batch events and send them in bundles. With debugging mode, you can still use it for testing without affecting your metrics. You can easily access the debugger in GA4. Navigate to the left-hand menu and click "Configure." You can then click "Debug View."

Enabling Debug View 

You have three options when it comes to enabling debugging on your website. These include enabling the Chrome extension, sending a debug_mode parameter, or using the preview mode of Google Tag Manager. We'll walk through each of these in detail.

One of the most popular ways to use debug mode is by installing and turning on the Chrome extension. This will allow you to run tests on your website. In the debug view, you'll see your activity in real-time.

Another way to use the debugger is by working with Google Tag Manager. This will allow you tag and inspect your activity in the preview mode.In the preview mode, Google Analytics will automatically add a parameter that will allow it to display data collected from the browser on your device.

Parameters in GTM
If you want to disable or change the GTM preview mode in Chrome, you can use a customized parameter in GTM to send data to the debug view. You can add the debug_mode option to the GTM configuration tag. This will allow Analytics to send the data to the debug view. The value should be "true." Image Courtesy of Simo Ahava. 

Debug mode is a feature that can be used to test apps on mobile devices. You can start your tests by enabling this feature through one of the options above.

Using Debug View

GA4 DebugView
On the left side of your screen, you can see the first column of the debugger view, which features circles representing the most recent 30 minutes. Image Courtesy of Ken Williams.

The number of events that occurred during that specific minute is displayed inside the circle. Clicking on one of the circles will bring up the details about the events that occurred during that period. This feature allows you to see the events that happened in detail.

The middle column displays the various events and their corresponding timestamps. You can also click on the event to see the associated parameters.

The top events in the right-hand column are the most popular events that happened within the last 30 minutes. You may click on them and choose a specific parameter, and then you can see the timestamps of the parameters that were sent with the linked events.

The right-hand column displays the user properties of the device that's currently running in debug mode. You can also look through the changes that have occurred in the last 30 minutes by clicking on the clock icon.

The top section of the view features a device selector that allows you to select which of the devices that you want to run in debug mode. The device selector appears at the top of the view. It lets you choose which of the devices that you wish to run in debug mode.

You can click on any event to view its list of parameters and the list of people using debug mode. If there are multiple events happening simultaneously, you can pause the stream by clicking anywhere in the middle section. 

Understanding Each Part of DebugView’s User Interface in GA4

Debug View can feel a bit overwhelming at first, as there are so many features available to track and debug those events happening in real time. Fortunately, the interface can be divided into sections that allow you to understand all of the information needed. 

Debug Device

The debug device shows you the number of devices that are connected to the debugging mode and lets you select the one that you want to examine. It also displays the device's name so that you can identify which one is sending data to Google Analytics.

Minutes Stream

The Minutes Stream is a minute-by-minute summary of your interactions with the website in the last 30 minutes. The blue circle represents the total number of events that happened in that minute, while the small ones show the count on the timestamp.

Seconds Stream

The seconds stream shows all the events that happen as you interact with the site. The colors of the events are blue, green, and orange. There are also circles that represent the user properties and parameters of the events.

Top Events 

The events that happened within the last 30 minutes are shown in this section. They include conversions, generic events, and errors with an orange bug icon.

The events will be shown with the total count and the parameters sent with them. In addition, you can click on individual timestamps to get more details.

User Properties 

The last section displays the user properties that you've received from the device that you're testing in the last 30 minutes. You can also check the value changes by clicking on the clock icon.

Using BigQuery to Debug a Tracking Implementation

Google BigQuery logo
Through the GA4 feature, you can now visualize and analyze raw data in BigQuery real-time. This allows you to perform debugging and tuning operations on your tracking system. Image Courtesy of Medium

In order to connect your GA4 property to a BigQuery project, navigate to the "Admin" section of GA4, click on "BigQuery Linking," and then follow the steps. After the connection has been established, enable the export option to BigQuery in the settings.

To export raw data in real-time, go to your project's BigQuery instance and select the analytics_property_id dataset. In the dataset, you'll find the events_intraday table, which stores the live event data from GA4.

With the ability to run SQL queries on real-time data, you can easily identify and fix issues related to your tracking system. This feature allows you to perform various tasks such as validating custom parameters and monitoring specific events.

Debugging GA4 for Apps

One of the most critical factors that a company should consider when it comes to developing marketing apps is having the proper Google Analytics tracking tools. These tools can help a business collect and analyze data on their users, and it can also help them make informed decisions regarding the development of their apps. Having the correct tools and code can help them identify and resolve various issues related to the app's performance.

Mobile apps do not provide the same level of access to network requests as web applications, which typically allow you to inspect and debug them using a browser's developer tools. To solve this issue, you must use proxy tools which can be used to inspect and intercept network traffic, such as Google Analytics requests. The general features of these tools can be seen in the device and the server.

A proxy will reroute the traffic between the web and your app. With this feature, you can monitor and analyze all the requests, payloads, and responses sent and received by the app in real-time. It can help you determine if the data is being properly received or sent.

Webviews

A web view is a component within an app that enables developers to run web-based applications inside the app. It bridges the gap between the web content and native apps by providing a smooth user experience.

Kotlin logo
Unlike native apps that are built using a variety of programming languages such as Swift for iOS and Kotlin for Android, WebViews are built using a combination of HTML, JavaScript, and CSS. Image Courtesy of Twitchtime

Webviews provide a smoother and more app-like experience than their native counterparts. Although native apps are generally more stable and perform better than their web counterparts, WebViews are a more cost-effective alternative for developers who want to leverage existing content.

Why Isn’t My Debug View Working?

If you’ve taken all of the necessary steps to enable and use debug view but still can’t get it to work in GA4, there are certain situations that can prevent it from functioning. 

  • In the DebugView report, you didn't select your device. The part about "Device selector" indicates that you should have chosen your device before the data will appear.
  • You failed to enable Debug Mode in the events sent to GA4. This is a common issue, and I typically resolve most of them by reviewing your code and sending a few more events. To resolve this issue, please refresh the DebugView window and select your device.
  • All browser extensions are used to block GA4 so that it can't collect data. For example, the ad blocker known as adblocker will stop working on GA4. If you're using a different browser, such as the Brave one, it will also block all extensions.
  • If you're planning on sending data to GA4 using a GTM container, then you should use the Preview Mode for Google Tag Manager. The GA Debugger Chrome extension will not work. You can also activate all the filters and plugins in the extension's list to prevent the report from working

Limitations of Debug View

Although GA4 Debugger usually works very well and provides lots of insight, it has some limitations. For instance, it can take a while for events to appear after they have been fired. Also, the time displayed in Debug View is based on the time that the event was received.

If several people have the GA debugger extension enabled on the site, you might see a variety of devices in the debugger section. To view your own interactions, select your device.

Getting Started with Debug View Today

As you have just learned, you can easily access the debugging view in GA4 through the Chrome extension or the Google Tag Manager's preview mode, which will allow you to monitor your activity in real-time.

Debug mode allows you to monitor and test changes made to your app or website after they have been made. With your debug view, you can easily confirm that everything is working as expected rather than taking the usual risks of data collection. 

Newsletter
Get great insight from our expert team.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By signing up you agree to our Terms & Conditions