How to add a monitoring script in an AMP website?

Question

I've been trying to solve this problem for about a month.

I have this whole website developed in AMP code (no WordPress).

And I need to include a monitoring script on the website to have an integration with RD Station(a marketing platform to analyze lead data).

This is the monitoring script:

<script type="text/javascript" async src="https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX-XXXXX-XXXXXXXXXX-loader.js" ></script>

If I just put the script on the page, the integration will work, but the AMP will not get validated, so it's not an option.

So, I tried to put the monitoring script using the AMP Iframe, and with AMP Script. But I didn't have success.

I will show above how I tried to use them:

First, I tried to put the script inside the AMP Iframe. But it didn't work, the AMP was not validated (Custom JavaScript is not allowed).

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

<amp-iframe 
        width="200" 
        height="200"
        sandbox="allow-scripts allow-same-origin"
        layout="responsive"
        frameborder="0"
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d230483.1797142007!2d-49.429883892450135!3d-25.495050065392732!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dce35351cdb3dd%3A0x6d2f6ba5bacbe809!2sCuritiba%2C%20PR!5e0!3m2!1spt-BR!2sbr!4v1605306200439!5m2!1spt-BR!2sbr">
    
        <script type="text/javascript" async src="https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX-XXXXX-XXXXXXXXXX-loader.js"></script>
    
   </amp-iframe>

Then I tried with AMP Script. The AMP was validated, but the monitoring script was not working.

  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
    <meta name="amp-script-src" content="sha384-OuN5AY4PdspoRf-q4DCxQvMVtBnT8yCs45AH1_0J1r5-u-VvxNTHvVEewVxeaefDd">
    
    <amp-script width="200" height="100" src="https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX-XXXXX-XXXXXXXXXX-loader.js">
    </amp-script>

That last try with AMP SCRIPT gives me the error:

log.js:258 [amp-script] Uncaught TypeError: Cannot read property 'appendChild' of undefined at (amp-script%5Bsrc=%22https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX-XXXXX-XXXXXXXXXX-loader.js%22%5D.js:3)

Can someone help me to solve this problem, please? I really need to make that script work on my AMP page. Thx a lot!

I think you're going to have to ask AMP to support your flavor of analytics. The custom JS and iframe techniques will not work because - in effect - you need to `XHR` information. The AMP team usually is responsive when asked to support a new analytics vendor. Suggest you open an issue on https://github.com/ampproject/amphtml/issues — Jay Gray, Nov 14 '20 at 22:31

score 0 · Accepted Answer · answered Dec 17 '20 at 17:04

Agreeing with Jay's answer, and adding to it: <amp-script> runs code with a virtual DOM, in a Web Worker. The entire DOM API and Web API are not supported, so any significant body of stock JavaScript would need modifications to work in this context. Your odds of getting a third-party script to work there are extremely low.

I think the best approach here is simply to add the vendor's JavaScript to your page. It will no longer be valid AMP, which means your page won't get into AMP caches. So you'll lose that speed advantage, and the third-party script will no doubt take a toll on your performance. But this is a perfectly valid approach! As long as most of your page sticks with the AMP way, its chances of being fast and stable and passing Core Web Vitals are quite good.

Thx Ben! I have done this as you recommended that day. I forgot to update my question here on the Stack overflow. The website is still fast and my team are satisfied with the approach. — João Felipe, Dec 18 '20 at 18:18
That's great! I just thought I'd just put the answer out here so that others could discover it as well. I don't think people always consider the potential of using invalid AMP. — Ben Morss, Dec 19 '20 at 22:33

How to add a monitoring script in an AMP website?

1 Answers1