Duplicate event on thankyou page when refresh the page

Question

we have thank-you page and it looks like:

www.domain.com/lang/pay-success/41

and the last number changes if they buy someother products.

product 2:

www.domain.com/lang/pay-success/42

product 3:

www.domain.com/lang/pay-success/43

I want to set a page view event in GTM for tracking our sales ( by pageview on thank-you page ) as an event but I'm afraid if people refresh the page it counts as a new event.

what is the best solution to prevent duplicate event counting?

Answer 1

The best solution is to have the front end to push a dataLayer event with all the details about the purchase on the purchase and now it's up to them to not push it on empty page reloads.

If there's a problem with that, then you can implement a hack. Have a simple tag that adds a cookie for a few minutes after you fire your purchase tracking logic. And then add that cookie as a blocker for your purchase tracking trigger.

In your case, you can even improve the logic by storing the product id in the cookie and have the blocker compare the cookie to the current product id before blocking. Just to make sure you're not blocking another quick purchase a user can conduct.

You can further improve the logic by... detecting whether a user reloaded the page or navigated to it and it can be done through the performance API. Here is a snippet that I sometimes use for page load debugging for tracking:

//This becomes useful... when you need to distinguish a navigation from a page refresh. 
function print_nav_timing_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i=0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.interactive);

    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));

    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}

That's the last function from here: https://github.com/cthae/Analytics/blob/main/Adobe%20Launch/Snippets.js

Note that it's not super reliable since there are other ways to reload the page without the browser knowing about the reload. But when it does know it's a reload, you can likely reliably block the event from firing.

This logic provides a pretty good tracking coverage, but it's not perfect since a user that would buy the same product two times consequently, however unlikely, will not be tracked the second time they conduct the purchase.

In most cases, such a discrepancy would be negligible, however, since it would be not noticeable behind the normal front-end analytics data corruption due to adblockers, network issues, etc.