Best way to include custom JavaScript in AMP

Asked 16/3, 2016 at 12:29 Answered 3/11, 2019 at 9:25

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>

Crissy answered 16/3, 2016 at 12:29 Comment(3)

You are right that only non executable script tags such as application/ld+json tags are allowed. Script tags are prohibited except the mandatory script tag to load the AMP runtime and the script tags to load extended components. You can see the specific form for custom js in Allowed and Prohibited AMP html tags documentation. – Sandrocottus 18/3, 2016 at 0:8

Thats i know but i am still struggle on that but i didn't find any solution yet. anyway, thanks – Crissy 25/3, 2016 at 21:9

In the AMP documentation there is clearly a section for custom JavaScript. Here is the recommended way to add it: amp.dev/documentation/guides-and-tutorials/develop/… – Rockefeller 22/7, 2020 at 9:28

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:

Don't use AMP. Nobody is forcing this on you.
Remove the script tag from your amp document and live without that functionality.
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?
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.

Redding answered 28/3, 2016 at 18:55 Comment(5)

Hi, could please supply me with an example of an AMP page loading a javascript with amp-iframe? – Schlenger 24/1, 2017 at 15:24

For #1 - don't use AMP - I guess you could still use AMP and still get most of the speed benefits, but you wouldn't declare or validate it as AMP. (In this case, you could see AMP just as a set of best practices and code examples for achieving fast websites.) – Bromley 6/6, 2017 at 15:35

@Bromley this is actually really true – Helicline 27/7, 2017 at 23:38

@Bromley the whole point of using AMP is for Google to cache your pages. If you aren't going to declare or validate it as AMP, it defeats the whole purpose. AMP is certainly not a set of best practices. – Niobous 19/2, 2018 at 17:13

@Niobous I can't believe you think that people are using AMP mostly for SEO benefits, rather than cause it's the best framework in the world ever. ("I am shocked - shocked to find that gambling is going on in here!", "Your winnings, sir"). To suggest that, is to suggest that Google is abusing it's dominant position in the market place. Surely if they didn't include the SEO benefits, then AMP would be equally as successful, if not more, based on it's own merits? ;-) – Redding 19/2, 2018 at 18:22

<script> tags are generally not allowed in AMP. There are a handful of external javascript files, built as part of the AMP project, which are allowed and even required in some cases. Other than those, javascript is not allowed. Custom script tags are not possible with AMP.

Peddler answered 18/3, 2016 at 20:38 Comment(1)

You would need to remove the script tag. – Peddler 28/3, 2016 at 18:27

To use custom Javascript in AMP page, you should write it in Javascript file (e.g.: amp-iframe-0.1.js). Then add this script to <head>: <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Custom javascript could be called by using amp-iframe. E.g.:

<amp-iframe width=300 height=300
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
</amp-iframe>

Motherhood answered 7/9, 2016 at 6:55 Comment(4)

where is the javascript being called? – Firooc 27/7, 2017 at 13:6

i dont find javascript in this – Portrait 1/2, 2018 at 9:5

@Firooc please place the script inside <head> </head> – Motherhood 3/2, 2020 at 2:2

@AdithyaSai javascript is placed inside _amp-iframe tag – Motherhood 3/2, 2020 at 2:3

Now no need to use amp-iframe because of AMP natively support javascript as mentioned in the official document

AMP pages support custom JavaScript through the <amp-script> component as like below :

<!doctype html>
<html ⚡>
<head>
  ...
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<body>  
  ...
  <amp-script layout="container" src="https://example.com/myfile.js">
    <p>Initial content that can be modified from JavaScript</p>
  </amp-script>
  ...
</body>
</html>

Here is official amp-script specs

Beverle answered 25/7, 2019 at 17:57 Comment(0)

Ok, I had the same problem and the best way for me is use iframe, which amp will render asynchronously. It does mean, you can solve it for example like this:

Server side api: GET request (for example /api/frames/my-js-script-app). After call it, you will get follow code:

<html>
<head>
   <script defer src="your_js_scripts"></script>
</head>
<body>
  <!-- html code which using your javascript, if exists... --!>
</body>
</html>

Add AMP frame lib to your app:

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

Now, you can use in your body this:

<amp-iframe width=500 height=300
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    frameborder="0"
    src="https://localhost/api/frames/my-js-script-app">
</amp-iframe>

Be careful with creating api on your server. AMP frame need https communication - it does mean something like this: https://localhost/api/frames/my-js-script-app

Now, amp will render your app asynchronously and everyone are happy :-))

Hope it helps!

Iphigeniah answered 26/3, 2018 at 7:46 Comment(0)

AMP allow the use of custom JavaScript in both development and production mode without necessitating a (iframe) hack.

To include a custom JavaScript in your AMP page, make use of the <amp-script> component.

Below, a snippet illustrating how to use the <amp-script> component;

<!doctype html>
<html amp lang="en">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- Important to add "amp-script" custom element reference -->
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
  <title>AMP with custom JavaScript</title>
  <link rel="canonical" href=".">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
<head>
<body>
  <amp-script layout="container" src="https://example.com/my-custom-javascript.js">
    <p>Here, content that you may want to modify using a custom JavaScript</p>
  </amp-script>
</body>
</html>

Note that the reference to your custom JavaScript can either be a relative or full path.

It is good to note that AMP enforces a limit of 150 kilobytes of custom JavaScript for all <amp-script> component on any given page.

The reason for the 150 kilobytes of custom JavaScript for all <amp-script> component is to keep performance in check.

Mariehamn answered 3/11, 2019 at 9:25 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags