How do I remove URL params from getting pushed to GA4 through GTM? I have tried many solutions but none seem to be working. Which key in "Fields to Set" do I need to use so GTM replaces the url query param from all dimensions like page_path, page_location, path_referrer?
3 Answers
This article has been my life saver when dealing with URL params in GA4, but please use my experience and avoid the mistake of applying the script directly to page_location
.
page_location
is what I call a technical dimension that GA4 uses to sort referring websites according to its internal rules and do any other GA4 things. Remove URL params from page_location
using GTM, and you'll stop seeing all channels, reliant on UTMs—so paid search, display, paid social, email etc (provided you use UTMs, of course). Don't forget: in this case, you remove the URL params in GTM before they get in GA, so if GTM strips params out, GA doesn't see them.
To illustrate my mistake, this is how my GA4 configuration tag in GTM looked like initially:
Bad idea. Don't touch page_location
.
The best approach is to just create your own dimension which you would use to store 'clean' URLs, say, page_URI
. The reason: you stop relying on GA built-in dimensions that (potentially) are prone to change and you create something of your own that you will have control over and can add to any event as a dimension.
Below is my version of the script in GTM, deployed as a Custom Javascript Variable:
function() {
var params = ['hash', 'email', 'utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term', 'gclid', 'fbclid', 'mc_cid', 'mc_eid', 'msclkid']; //Add URL params to be excluded from page URI
var a = document.createElement('a');
var param,
qps,
iop,
ioe,
i;
a.href = {{Page URL}};
if (a.search) {
qps = '&' + a.search.replace('?', '') + '&';
for (i = 0; i < params.length; i++) {
param = params[i];
iop = qps.indexOf('&' + param + '=');
if(iop > -1) {
ioe = qps.indexOf('&', iop + 1);
qps = qps.slice(0, iop) + qps.slice(ioe, qps.length);
}
}
a.search = qps.slice(1, qps.length - 1);
}
return a.href;
}
Two things to mention about the code:
- List all params you want to strip out in the array params;
a.href = {{Page URL}}
- the code makes use of GTM's built-in variablePage URL
(hence double curly brackets) that captures the full URL (without hostname, though). If you feel fancy, you can replace it with plain JS.
So the code above now populates the GTM field/GA4 dimension page_URI
in the main configuration tag and any other tags, where I think having a clean URI is useful:
I do realize that this approach uses up one GA4 dimension, but it's a price I'm willing to pay to have a clean URL in the absence of a better solution.
-
Thanks for this answer, I'll try it out, very helpful! Small thing, AFAIK the GTM variable
{{Page URL}}
returns the full URL, which includes protocol, hostname, page path, query parameters. Commented Mar 30, 2022 at 9:40
In the GA4 tag in GTM try to set page_location
as Field to Set and a Custom JavaScript Variable as value with this definition:
function(){
return document.location.hostname + document.location.pathname;
}
i.e. (note: App+Web is old name of GA4):
-
1Thanks. This would also make sure that other automatically events like page_referrer do not contain the url query params right? Basically, my requirement is no page dimension should have the URL query params, as this helps in collecting more clean data.– Sp_97Commented Apr 18, 2021 at 14:44
-
Obviously referrer is a different thing. So, try to override in the same way (concept) the other fields that contain url. Commented Apr 18, 2021 at 14:57
-
So, how do I view which all fields have that URL? Because in GA, real-time/debug view, I can see page_location, page-referrer and their values. But in GA reports, I can only see page screen name. But my intention is, I should not store any PII by chance in the URL. Hence I want to remove URL query params." How do I verify which all fields will have this params, if i can only see page screen name in GA reports?– Sp_97Commented Apr 18, 2021 at 16:32
-
The following parameters are collected by default with every event: language, page_location, page_referrer, page_title, screen_resolution. So you have to manage page_location and page_referrer. Commented Apr 18, 2021 at 17:20
-
Got it. Today, when I reconnected my connection between google data studio and Google Analytics, I noticed two additional parameters showed up - (Full Page URL and page path + query string). I believe Google has auto-added these now. So, now to remove query params from all page properties, apart from page_location and page_referrer, what else should I manage?– Sp_97Commented Apr 23, 2021 at 15:44
You can also use the following JavaScript in the custom JavaScript variable instead of the custom JavaScript mentioned above.
In this custom JavaScript instead of creating a new anchor element, we simply are taking the full page URL and then using the JavaScript's in-built URL()
method to convert it to a proper URL that can be programmatically managed and then manage it according to the need.
I'm sharing my script below:
Step 1
Create a custom JavaScript variable inside your GTM and add the following JavaScript code into it.
function() {
// Set the array with the list of query string you would like to remove being shown up in Google Analytics 4
var excuded_query_params = [
'add',
'the',
'query',
'strings',
'you',
'would',
'like',
'to',
'be',
'removed',
'from',
'GA4',
'analytics',
'report'
]
// Get the full Page URL from GTM in-build variables
var page_url_string = {{Page URL}}
// Convert the received URL from string format to URL format
var page_url = new URL( page_url_string )
var page_url_copy = new URL( page_url_string )
// Loop through the query parameters in the URL and if there is any query param which is in the excluded list,
// remove that from the full URL
page_url_copy.searchParams.forEach( function(param_value, param_name) {
if( excuded_query_params.includes( param_name ) ) {
page_url.searchParams.delete( param_name )
}
} )
// Return the final URL
return page_url.toString()
}
Please Note: as we are going to replace the value of page_location
a default GA4 variable's data - it is highly recommended that you do not remove the utm_
query parameters from the URL as GA4 reports use that data internally and that may lead to report breaking. So, it's best that you do not remove query parameters like utm_souyrce
, utm_campaign
etc.
Step 2
Inside your GA4 Configuration Tag, click on Fields to Set and add a new field with the Field Name set as page_location
and value set as this custom JavaScript variable.
Step 3
Now it's time to preview inside GTM and deeply.
-
Thanks for this, I like the approach here better too. Could you have another look at it though, because it seems that when a URL has multiple parameters, your custom javascript does not seem to understand to remove the first parameter that comes after the first '&'. Also, in rare cases where a certain parameter appears multiple times in a URL, the script only manages to remove the first instance of the parameter, is there a way to make it remove all instances? Commented May 21, 2022 at 10:26
-
@HenrikSöderlund that seems wired and I am also unable to reproduce it. It seems wired because the above code converter the whole URL into a URL() format and does not consider it as a string. So, if the system identifies it as query param then it would definitely go though the forEach loop. Can you share an example URL where the issue is visible?– iSaumyaCommented May 23, 2022 at 8:37
-
@HenrikSöderlund you can also play around here to test: jsfiddle.net/54mas1xL I've also updated the code above which had a bug. Now your issue should be resolved– iSaumyaCommented May 23, 2022 at 12:06
-
1Nice, that works much better now, thanks for the fixes! Have you considered building your great solution into a Variable Template for the Community Gallery, it would be beneficial to the community! There are a few similar ones out there, but this has a simple but effective result. Commented Jun 2, 2022 at 2:50