2

In order to better understand how Flipboard traffic performs compared to normal web traffic, we'd like to use a unique Amazon affiliate ID for Flipboard when they load our AMP page in their mobile app.

AMP offers amp-script for custom JavaScript, but it has significant limitations. Notably, it doesn't let you mutate the DOM without associated user input. The best idea I've come to is:

<script id="entry-content" type="text/plain" target="amp-script">
    document.querySelectorAll('a').forEach(function(el) {
        el.addEventListener('click', function() {
            var link = el.getAttribute('href');
            if (-1 === link.indexOf('amazon.com')) {
                return;
            }
            el.setAttribute('href', link.replace(/tag=[A-Za-z0-9\-]+/, 'tag=newid' ));
        });
    });
</script>

AMP allows the mutation but the browser uses the original link value for the new tab, so that doesn't work.

I've also tried:

  • Calling window.open() in the click event handler. open() isn't available though.
  • Simply modifying the links on document.addEventListener('scroll'). AMP killed the mutations.

Any other crafty ideas?

Daniel Bachhuber
  • 169
  • 5
  • 1
    Can you adapt to this approach: https://amp.dev/documentation/components/amp-link-rewriter/ – Jay Gray Apr 17 '20 at 16:36
  • Thanks for the suggestion, @JayGray! That _almost_ looks like it would do the trick, except for one gotcha: it doesn't appear I can inspect the User Agent when the JSON blob is generated. – Daniel Bachhuber Apr 20 '20 at 18:55
  • I fear that there is no front-end solution for this since you will not be allowed to modify the DOM without interaction. One solution that I can think of, is doing the User Agent check in the back-end and simply render the link "properly" from the get go. – stylesuxx Apr 21 '20 at 15:14

0 Answers0