Javascript, Console and Network error tracking with Google Analytics 4

Bonus: And missing page visits.

Introduction

This article includes all the steps to create a Data Studio report on the errors that happen on your users browsers. It requires a bit of coding (GTM or gtag), a GA4 property and some patience in setting things up.

The code

This code can be used when inplementing GA4 via gtag or GTM. The next sections explain how to add it via each method.

Adding the code to your site (for GA4 using gtag)

Place the above code as near to the top of your html as possible. This gives it a better chance to catch early errors.

We also recommend tracking page types. This can help you group your errors into sections of the site. You will have to devise your own way of identifying page types, than add it to your gtag code like this:

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

  gtag('config', 'G-XXXXXXXXXX', {
    page_type: 'PAGE TYPE NAME'
 });
</script>

Adding the code to your site (for GA4 using GTM)

Take the code above and change the useGTM value at the top to true. Add the code as a Custom HTML tag that fires on All pages. Call it something like “Error Tracking”.

We then have to add the following Data Layer Variables:

Clicking on a cell will copy its content to your clipboard.

Name	Data Layer Variable Name
DLV – error.error_type	error.error_type
DLV – error.error_message	error.error_message
DLV – error.error_object_type	error.error_object_type
DLV – error.description	error.description
DLV – error.fatal	error.fatal
DLV – error.error_filename	error.error_filename
DLV – error.error_lineno	error.error_lineno
DLV – error.error_colno	error.error_colno
DLV – error.error_error	error.error_error

Next we need the trigger for these errors.

Name: Event – exception

Trigger Type: Custom Event

Event name: exception

Finally we need to create a GA4 Event tag that sends an exception event with all the parameters:

Name: GA4 – Event – exception

Tag Type: Google Analytics GA4 Event

Configuration Tag: Your own configuration

Event Name: exception

Trigger: Event – exception

Parameters:

Parameter Name	Value
error_type	{{DLV – error.error_type}}
error_message	{{DLV – error.error_message}}
error_object_type	{{DLV – error.error_object_type}}
fatal	{{DLV – error.fatal}}
error_filename	{{DLV – error.error_filename}}
error_lineno	{{DLV – error.error_lineno}}
error_colno	{{DLV – error.error_colno}}
error_error	{{DLV – error.error_error}}
description	{{DLV – error.description}}

Like with the gtag implementation we recommend sending a page_type parameter to GA4 so that you can segment your reports. How you determine the value of the page_type is down to you. You will then have to send it in the dataLayer, create a variable for it, and add it to your GA4 Configuration fields.

Adding GA4 definitions

You need to define all our dimensions and metrics that Data Studio uses before it can see them. Add them to your GA4 Account in the ‘Custom definitions’ section as dimensions of scope ‘Event’. Ones used by the Data Studio report are required.

Dimension Name	Description	Event Parameter	Required?
Page type	A way to group pages. example page types could be category, blog_posting, home.	page_type	Yes
Description	Used by the exception event to explain the error. Tends to be a verbose version covering other dimensions. Good for real time inspection	description	No
Error type	Used by the exception event to explain the type of error (javascript, console, jsonld, network)	error_type	Yes
Error message	The explanation for an exception	error_message	Yes
Error filename	Used by the exception event to provide the file where the error happened	error_filename	Yes
Error line number	Used by the JavaScript exception event to provide the line where the error happened	error_lineno	Yes
Error column number	Used by the exception event to provide the column in the line where the error happened	error_colno	Yes
Error error	The error property within the error event	error_error	No
Error object type	Identifies the type of error object that was fired.	error_object_type	No

This could be a good time to check if errors are being reported. In the GA4 realtime report you can look for ‘exception’ events. If you click on the event it will show what parameters got sent. And if you click on them you can see the values. After a few days you should see them in the events report.

Creating the Reports Data Source

At the moment the standard Data Source for GA4 is not usable. It randomly messes up the custom definitions. We have worked out the following steps to create a special Data Source that can be used in our reports. Hopefully GA4/Data Studio fix this in the near future.

1. Copy the Website Errors GA4 Data Source by opening the data source and clicking on the copy icon and the copy button
2. Select your GA4 account from the connection options, then click the ‘Reconnect’ button. The new data source is now based on your property. A popup may appear indicating issues. Ignore them and click ‘Apply’
3. Rename it (top left) to include your stores name. That way you know which store and which version of the data source you are looking at. e.g. ‘Website Errors GA4 – My Site – vX.Y’
4. Sometimes Data Studio duplicates some of the inbuilt fields with only one of the copies working. If you see any invalid formula warnings then is is probably the case. Check through all the fields and add a ‘ 2’ after the make of duplicates. This will then let you try each duplicate in any failing formula.
5. You now need to fix all the custom definition based fields so the data source works. Check every field starting with an @ (indicates it uses custom definitions) and make sure all formulas match the formulas in following table. If the formula fails then you may have to try the other duplicate for the referenced field.
6. Change the @Missing Page formula to one that will work for your site. e.g. Page title = ‘Missing Page’

Field Name	Field ID	Formula (fx)
@Error column number	fx_error_colno	Error column number
@Error filename	fx_error_filename	Error filename
@Error line number	fx_error_lineno	Error line number
@Error message	fx_error_message	Error message
@Error type	fx_error_type	Error type
@Missing Page	fx_missing_page	@Page type = ‘404’
@Page location	fx_page_location	Page location
@Page referrer	fx_page_referrer	Page referrer
@Page type	fx_page_type	Page type

The custom data source also contains the following extra fields that do not need to be checked. These fields are added so that a completely different connector could be used as the source for the report. e.g. BigQuery.

Field Name	Field ID	Formula (fx)
#Browser	fx_browser	Browser
Date	fx_date	Date
Device	fx_device	Device
Device category	fx_device_category	Device category
Event name	fx_event_name	Event name
Operating system	fx_operating_system	Operating system
Operating system with version	fx_operating_system_with_version	Operating system with version
Page path and query string	fx_page_path_query	Page path + query string
Session medium	fx_session_medium	Session medium
Session source	fx_session_source	Session source

Reports will have errors or be inaccurate if the functions on those fields are incorrect.

Your data source is now ready to use to power new reports.

Creating the Report

Open the Website Errors report template and click on the ‘use template’ button. Select the data source you have previously created and click ‘Copy Report’. Rename the new report (top left) to include your site name. e.g. ‘Website Errors – My Site – vX.Y’