I'm trying to trigger an event in GA4 with DTM (Adobe Dynamic Tag Management) for my client. I put following script1 in <head> section and script2 in top of <body> section. The event seems being fired properly so far since the clicks and views are counted on Google Analytics realtime page and DebugView.
But when I use browser back function after I clicked <a>, soon after Navigated to the previous page, Navigated to current page again. If I press the browser back again, the screen transits to the 2 previous page.
I could find this issue on
As long as you DON'T have js plugin on your browser, it seems occur. How can I fix this issue?
Thank you for your help.
script1
<!-- Global site tag (gtag.js) - Google Analytics -->
<script 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');
</script>
script2
/**
* google analytics setting
*/
jQuery(function ($) {
if (typeof gtag === "undefined") {
return;
}
gtag("config", "G-XXXXXXXXXX", { transport_type: "beacon" });
$("a[data-gaevent]").on({
click: function (event) {
var href = $(this).attr("href");
var transitioned = false;
var is_page_transition =
href[0] !== "#" && $(this).attr("target") !== "_blank";
if (is_page_transition) {
event.preventDefault();
setTimeout(pageTransition, 1000);
}
function pageTransition() {
if (!transitioned) {
transitioned = true;
location.href = href;
}
}
var tagStrings = $(this).data("gaevent");
var tagCount = 0;
var tagOutput;
var isDone = false;
tagOutput = tagStrings.split(/\s+/);
tagCount = tagOutput.length - 1;
for (var i = 0; i <= tagCount; i++) {
if (i === tagCount) {
isDone = true;
}
sendGA(tagOutput[i], isDone);
}
function sendGA(gaEventTag, isDone) {
gtag("event", "click_a", {
eventAction: gaEventTag,
eventLabel: gaEventTag.replace(/-.*$/, ""),
eventCategory: location.href.replace(/#.*$/, ""),
hitCallback: function () {
if (is_page_transition && isDone) {
pageTransition();
}
},
});
}
},
});
});