How to preview and monitor Google Analytics 4 events using Debug View?

So you've just installed the Google Analytics 4 extension on your Magento 2 store and are ready to start collecting valuable data about important eCommerce events. Congratulations!

If you haven't set your extension up yet, make sure you follow the steps in the documentation and the User Guide to configure it, as this guide assumes the initial module setup is complete.

The next step is to test and make sure your data is being sent to Google Analytics correctly. The problem, however, is the fact that Google Analytics 4 usually doesn't start processing/populating data in its reports for up to around 48 hours, so it can be a little bit tricky to confirm the data is flowing in correctly.

It's possible to use Google's Realtime report to see information about the current visitors on your website, as well as the events that made it into analytics, however, the data provided here isn't as detailed as possible, so let's explore an even cooler way of checking the data our extension sends!

Note: If you see your data and events in the Realtime report, this is a great indicator that your configuration is successful and your data is being sent through!

Note: Events are not visible in debug mode if you have implemented privacy controls on the client-side, or if you've implemented consent mode and users have not given consent for Analytics cookies.

Note: The method described below applies to client-side tracking via Google Tag Manger Tags. If you're using the Google Analytics 4 PRO extension and tracking data via Measurement Protocol, you can set the the Enable File Log option to Yes in the Magento 2 backend and view the sent data in var/log/ga4.log

Setting up your Google Analytics 4 Tag for Debug View

In order to ensure Google Analytics 4 knows you want to view debug information (in other words, detailed info about the analytics data you're sending it), you'll need to set up your Google Analytics 4 Tag with a debug parameter. Here's the step-by-step process for doing this:

1. Switch over to your Google Tag Manager container and head into Workspace -> Tags.
2. Find your Google Analytics 4 Tag, usually labeled WP - GA4 and click on it to open the configuration options.
3. Click on Tag Configuration and expand the Fields to Set section.
   
   
   
   
4. Click Add Row.
5. Under Field Name, add debug_mode.
6. Under Value, add true.
   
   
   
   
7. Save the tag and publish your container to ensure the changes are applied and updated. Once the container is published, you should be done! Your Google Analytics 4 tag should now be sending debug information to Google Analytics 4. Let's see how we can view the debug information using Debug View.

Viewing debug information using Google Analytics 4's Debug View

Now that you've configured your tag to send debug information, it's time to take a look at it and see what's being sent. Here's how to do that:

1. Head into Google Analytics 4 and log in if you haven't done so already.
2. Click on Admin (the settings cog) to open up the admin settings.
3. Scroll down and find DebugView in the Property column.
   
   
   
   
4. Click on DebugView, which will open up a timeline. This is where your recorded events will show up, along with detailed information about what information was sent alongside it.
   
   
   
   
5. To test it out, trigger an event by heading onto the store and navigating to a Category Page. This should trigger a view_item_list event, which should then shortly be recorded in the DebugView timeline.
   
   
   
   
6. As you can see in the image above, we have our view_item_list event triggered as our last event, along with a few others that were triggered during various actions taken on the website.
7. You can click on the event for more specific details about the information sent alongside it. Click on the view_item_list event to see its parameters. In the following example, you can see specific details about every one of the items on your Category Page that the event captured:
   
   
   
   
8. Using this process, you can go through and confirm that all the events the module is configured to send information for are triggered during the specific action they're built for, as well as that the information the event is required to send is all there! Here's an example of a Purchase event being recorded, along with some information about the data that was sent with it:
   
   
   
   

Important Note: Once you're finished using the DebugView, remember to remove the debug_mode field from your Google Analytics 4 tag and republish your container!