title: Adding Jquery To AMP Pages
body: <p>Accelerated Mobile Pages (AMP) are very attractive to me because of their load speed.</p>
  
  <p>When running paid traffic at scale, a landing page that loads instantly could double your ROI. </p>
  
  <p>I am creating a custom landing page for an eCommerce product. This page will have:</p>
  
  <ul>
  <li>Navigation links at the top which can be shown or hidden based on a button click</li>
  <li>A survey interface which asks user questions and displays info accordingly</li>
  <li>Based on certain button clicks, do certain actions. e.g. Fire FB ads pixel events</li>
  <li>Use of jquery scroll to allow users to navigate to each section within the single page</li>
  </ul>
  
  <p>I'm used to including Jquery in the <code>&lt;head&gt;</code> and writing all my code in one section. This would be loaded when the DOM loads... and everything works fine. Happy days. </p>
  
  <p>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. </p>
  
  <p>See here: <a href="https://amp.dev/documentation/guides-and-tutorials/develop/custom-javascript/" rel="nofollow noreferrer">https://amp.dev/documentation/guides-and-tutorials/develop/custom-javascript/</a></p>
  
  <p>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. </p>
  
  <p>This documentation also states,</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>Jquery is around 100 KB... If I have to include this library with every <code>&lt;amp-script&gt;</code> tag, this means I physically can't use more than one tag?</p>
  
  <p>Am I allowed to include the entire body within this <code>&lt;amp-script&gt;</code> tag?</p>
  
  <p>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?</p>