Best way to include custom JavaScript in AMP

javascript amp-html
Fazlul Karim picture Fazlul Karim · Mar 16, 2016 · Viewed 35.5k times · Source

I read all documentation about script tag but I cannot find how to include a custom JavaScript in AMP HTML.

I know the <script> tag is prohibited unless its type is application/ld+json.

There are default AMP HTML runtime components and extended components which contain specific form for different components, but I could not find a specific one for custom JavaScript.

Here is the script tag I want to include in AMP HTML;

<script src="https://arifkarim.com/widget/layouts/global/js/legaltext.js"></script>

Answer

Barry Pollard picture Barry Pollard · Mar 28, 2016

The whole point of AMP is to only allow a subset of web technologies to stop your page being slow.

Javascript is often the cause of slow websites and so AMP pages do not allow them (except for the AMP scripts themselves), though they've tried to fill in the gap this leaves with amp components which are specially written to not be slow.

So if you want to use Javascript you've several choices:

  1. Don't use AMP. Nobody is forcing this on you.
  2. Remove the script tag from your amp document and live without that functionality.
  3. Find an amp-component which does the same as your JavaScript and use that instead. Not having a clue what legaltext.js I would guess by the name it displays some legal text like a cookie notice so maybe the amp-user-notification widget would work instead?
  4. Use your Javascript in an amp iframe. These are allowed in amp pages but will presumable be loaded with a lower priority to ensure they don't slow down the main page.

Related questions

Add Javascript in AMP Pages

Please help me understand how to add javascript in the AMP (Accelerated Mobile Pages). My requirement is I get an ID in URL. For example localhost:8080/home?id=1.I would like to access that id in my html file. or …

Read More
What is AMP HTML and how does it fit in with framework/tool X?

OK, so we've all probably heard about AMP HTML from Google by now. What I'm curious is how this is going to fit in with our existing workflows. If you're writing a React or Angular app, how does AMP HTML …

Read More
How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More