Search code examples
javascriptjqueryhtmlamp-html

Adding Jquery To AMP Pages

Accelerated Mobile Pages (AMP) are very attractive to me because of their load speed.

When running paid traffic at scale, a landing page that loads instantly could double your ROI.

I am creating a custom landing page for an eCommerce product. This page will have:

  • Navigation links at the top which can be shown or hidden based on a button click
  • A survey interface which asks user questions and displays info accordingly
  • Based on certain button clicks, do certain actions. e.g. Fire FB ads pixel events
  • Use of jquery scroll to allow users to navigate to each section within the single page

I'm used to including Jquery in the <head> and writing all my code in one section. This would be loaded when the DOM loads... and everything works fine. Happy days.

However, reading the documentation on "Include custom JavaScript in AMP pages" it feels like it's going to make it very difficult. Almost impossible based on what I see.

See here: https://amp.dev/documentation/guides-and-tutorials/develop/custom-javascript/

It seems I have to create a tag for each piece of custom JS. Linking to my JS file with the "src" attribute. However, only the code within this tag will be executable by the JS file.

This documentation also states,

AMP enforces a limit of 150 kilobytes of custom JavaScript on each page. This limit is shared among all component on that page. If using a library, it must be imported to each individual component.

Jquery is around 100 KB... If I have to include this library with every <amp-script> tag, this means I physically can't use more than one tag?

Am I allowed to include the entire body within this <amp-script> tag?

Does this mean I must have one JS file, where I must copy the Jquery library in there. Then have my custom code within that file as well?

Solution

  • As far as I understand the documentation, you can wrap the area were the custom js is needed. If you need the script in all of your page, just wrap everything with the amp-script tag. - I've never done it myself, but this seems worth a try. I would be interested in knowing if it worked. 

    <body>
  <amp-script layout="container" src=".../script.js">
    ...
  </amp-script>
</body>

    Consider

    The DOM inside tags should be almost identical before and after initialization.

    and

    If your amp-script logic is not preforming a fetch, the DOM has less than one second to update the DOM. If a script mutates the DOM outside of the permitted window, it will result in a fatal error and the amp-script component will terminate the Web Worker. A terminated component will not run again.

    Good luck!