CODEWITHSUNDEEP
javascriptamp-html
Fazlul Karim
Fazlul Karim

Reputation: 377

Best way to include custom JavaScript in AMP

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>

Upvotes: 19

Views: 44545

Answers (6)

Divyesh Kanzariya
Divyesh Kanzariya

Reputation: 3789

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

Upvotes: 3

nyedidikeke
nyedidikeke

Reputation: 7618

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.

Upvotes: 1

Petr Tom&#225;šek
Petr Tom&#225;šek

Reputation: 1438

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!

Upvotes: 1

PhamThang
PhamThang

Reputation: 73

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>

Upvotes: 3

Barry Pollard
Barry Pollard

Reputation: 45970

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.

Upvotes: 35

Gregable
Gregable

Reputation: 498

<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.

Upvotes: 4

Related Questions