In the dashboard of the new GA4, if I go to Engagement, Page and Screens, then press Page path and screen class I see repeated urls with query parameters with "?"
example.com/?utm_source=...
example.com/
I would like to ask how to unify the page paths
Query parameter removal with App + Web is a bit different because of the automatic pageview tracking. If you need to remove parameters from your page paths, you can use the page_location field in your Configuration tag in GTM. Keep in mind that there are no filters or view settings to strip query parameters in the Google Analytics interface as we saw for Universal Analytics.
i.e. If you want to remove all query parameters from your page path, we'll use the same method but a different Custom Javascript Variable.
In a new Custom Javascript variable paste the following:
function() {
return document.location.hostname + document.location.pathname;
}
https://www.bounteous.com/insights/2020/05/15/excluding-url-query-parameters-google-analytics/
You can use the config object in your measurement code to override the location string that is reported. You should see a line of code that goes like gtag('config', '...your id...') or gtag('config', '...your id...', { /* some config */ }). You need to either add the 3rd config parameter, or if it is already there you need to add a new attribute into it, so your code should look something like this after all:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=...your id..."></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '...your id...', {
'page_location': location.protocol + '//' + location.host + location.pathname,
/* other options if you have anything else */
});
</script>
Please note that this will remove all URL parameters so everything after the ?. If you only need to remove some, you need to implement a bit more logic and set page_location to the modified URL with only the unwanted parameters removed.
document.location.pathname will break attribution to Google Ads and own campaign links with UTM parameters.gclid, anything with utm_ and gtm_debug)function cleanPageLocation() {
// define parameters to keep if available
var includeStrings = [
"gclid",
"utm_",
"gtm_debug"
];
var addressString = new URL(document.location);
var queryString = addressString.search;
/* check if query string holds any parameters, otherwise just return the url without them */
if (queryString.indexOf("?") != -1) {
// transpile ES2016 => ES2015
var _defineProperty = function (obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
};
/* https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript */
var getQueryParamsFromURL = function getQueryParamsFromURL() {
var match,
search = /([^&=]+)=?([^&]*)/g,
decode = function decode(s) {
return decodeURIComponent(s);
},
query = addressString.search.substring(1);
var urlParams = {};
while ((match = search.exec(query))) {
urlParams[decode(match[1])] = decode(match[2]);
}
return urlParams;
};
var filterParamsFromList = function filterParamsFromList(obj, list) {
var urlParamKeysFinal = [];
var urlParamKeys = Object.keys(obj);
/* test each param for availability and create array with final keys */
for (var i = 0; i < list.length; i++) {
urlParamKeysFinal.push(
urlParamKeys.filter(function (key) {
return key.includes(list[i]);
})
);
}
// merge all keys into one list
/* https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays */
urlParamKeysFinal = [].concat.apply([], urlParamKeysFinal);
return urlParamKeysFinal.reduce(function (cur, key) {
return Object.assign(cur, _defineProperty({}, key, obj[key]));
}, {});
};
// create param object from query string
var urlParams = getQueryParamsFromURL(); /* Create filtered query string */
queryString = new URLSearchParams(
// remove any non-matching keys from param object
filterParamsFromList(urlParams, includeStrings)
).toString();
// add ? to querystring unless it's empty
if (queryString != "") queryString = "?" + queryString;
}
// return cleaned URL
return addressString.origin + addressString.pathname + queryString;
}
}
excludeStrings array to define the parameter names you want to keepfunction cleanPageLocation() {
// define parameters to keep if available
var includeStrings = [
"gclid",
"utm_",
"gtm_debug"
];
var addressString = new URL(document.location);
var queryString = addressString.search;
/* check if query string holds any parameters, otherwise just return the url without them */
if (queryString.indexOf("?") != -1) {
// transpile ES2016 => ES2015
var _defineProperty = function (obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
};
/* https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript */
var getQueryParamsFromURL = function getQueryParamsFromURL() {
var match,
search = /([^&=]+)=?([^&]*)/g,
decode = function decode(s) {
return decodeURIComponent(s);
},
query = addressString.search.substring(1);
var urlParams = {};
while ((match = search.exec(query))) {
urlParams[decode(match[1])] = decode(match[2]);
}
return urlParams;
};
var filterParamsFromList = function filterParamsFromList(obj, list) {
var urlParamKeysFinal = [];
var urlParamKeys = Object.keys(obj);
/* test each param for availability and create array with final keys */
for (var i = 0; i < list.length; i++) {
urlParamKeysFinal.push(
urlParamKeys.filter(function (key) {
return key.includes(list[i]);
})
);
}
// merge all keys into one list
/* https://stackoverflow.com/questions/10865025/merge-
flatten-an-array-of-arrays */
urlParamKeysFinal = [].concat.apply([], urlParamKeysFinal);
return urlParamKeysFinal.reduce(function (cur, key) {
return Object.assign(cur, _defineProperty({}, key, obj[key]));
}, {});
};
// create param object from query string
var urlParams = getQueryParamsFromURL(); // Create filtered query string
queryString = new URLSearchParams(
// remove any non-matching keys from param object
filterParamsFromList(urlParams, includeStrings)
).toString();
// add ? to querystring unless it's empty
if (queryString != "") queryString = "?" + queryString;
}
// return cleaned URL
return addressString.origin + addressString.pathname + queryString;
}
<script>...</script> tag<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR-ID-HERE">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR-ID-HERE', {
/* below we let the function return the URL without query parameter */
'page_location': cleanPageLocation(),
});
</script>
function() {
page_location
more info: https://bluerivermountains.com/en/ga4-query-parameter-exclusion
