Why Dynamic AJAX Slide-Out Carts Break Cross-Domain Attribution

1. The Mechanics of DOM Timing Failures

Standard link decorators (including Google Tag Manager's native GA4 cross-domain linker) run when the initial HTML document finishes loading (DOMContentLoaded). They scan existing <a href="..."> tags and attach click event handlers.

However, when a user clicks "Add to Cart" on an AJAX-enabled store, the slide-out cart drawer doesn't reload the page. Instead, a JavaScript script fetches cart data via REST/GraphQL API and dynamically creates new DOM elements:

<div id="cart-drawer-popup">
  <!-- Injected 1,500ms after DOMContentLoaded -->
  <a id="checkout-btn" href="https://checkout.myshopify.com/cart/c/12345">
    Proceed to Checkout ($184.00)
  </a>
</div>

2. The Solution: JavaScript MutationObserver API

The modern, performance-optimized solution is the JavaScript MutationObserver API. Instead of polling the DOM in expensive loops, a MutationObserver listens directly to native browser DOM modification events.

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    mutation.addedNodes.forEach(function(node) {
      if (node.nodeType === 1) {
        // Intercept dynamically added links & forms instantly
        decorateElements(node.querySelectorAll('a, form'));
      }
    });
  });
});

observer.observe(document.body, { childList: true, subtree: true });