Ad block shouldn't break your checkout

We've recently started a shop with some merchandise using TeeSpring. We wanted to try out selling merch as a strategy for monetizing our game Bela Online. And while TeeSpring enabled us to set up this very fast and it is a no-brainer in terms of how hands off it is, there are some issues. Some critical issues.

What happened? 🤔

If your customer has an ad blocker enabled which blocks, well, ads, the whole checkout experience breaks. A friend of mine reported it today to me. He has uBlock Origin installed and when he clicks "Checkout" the site doesn't do anything. 😢

The experience just stops, and he couldn't go through with the order.

If you want to try it yourself, here's a link to the store https://bela.gifts/listing/fali-cetvrti-tamna?product=1303

I've sent a report through a channel intended for reporting issues with your order, but I've also wanted to write this blog post as a cautionary tale for other developers.

uBlock Origin breaks things 😿

So, what is the root cause of this issue? If we look at the code that breaks:

export const getLinkerParam = () => {
  const gaTracker = window.ga
  ? window.ga.getAll()[0]
  : null;
  return gaTracker
    ? gaTracker.get('linkerParam').split('=')[1]
    : '';
};

TeeSpring included a check for Google Analytics script and you would think: yeah, they know that window.ga could be null.

But what uBlock Origin does to alter window.ga, makes their check not robust enough.

window.ga ? window.ga.getAll()[0] : null;

uBlock Origin replaces window.ga with a dummy function that does nothing. I suppose they do this if their effort to block the loading of Google Analytics code fails.

This means that the check if the window.ga object exists passes, but then the rest of the code explodes. Touché.

TeeSpring, I love your product, please fix this and let's sell some T-shirts 🙂

--

HN discussion thread: link

If you enjoyed reading this, maybe you'll enjoy reading also about the game we built in React Native during the pandemic Bela Online