CODEWITHSUNDEEP
amp-htmlampscriptamp-iframe
João Felipe
João Felipe

Reputation: 23

How to add a monitoring script in an AMP website?

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!

Upvotes: 2

Views: 473

Answers (1)

Ben Morss
Ben Morss

Reputation: 126

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.

Upvotes: 0

Related Questions