Clicky

  1. Home
  2. How To
  3. How to add custom scripts in AMP

How to add custom scripts in AMP

There are two ways to include the custom scripts in AMP and in this tutorial I will show you both ways to include the script in AMP.

  1. External Scripts
  2. Inline Scripts

You can add the script with the help of amp-script tag and this lets you to add custom JavaScript to your AMP page while still retaining its lightning-fast speed!

1 – External Scripts

An amp-script element can load a JavaScript file from a URL. This is usually the best way to integrate a script as the browser needs to download the script only once.

Below the script, you need to add posts or pages you want to display amp-script

<amp-script layout="container" src="https://ampforwp.com/tutorials/wp-content/uploads/amp-scripts/custom_amp.js" class="amp-script-sample">
<button id="hello">Click!</button>
</amp-script>


There is the script in custom_amp.js and in that file, you need to add the scripts like

const button = document.querySelector('#hello');
button.addEventListener('click', () => {
  const h1 = document.createElement('h1');
  h1.textContent = 'Hello World!';
  document.body.appendChild(h1);
});

2 – Inline Scripts

You can also declare scripts inline and reference them by id and
Note that the type needs to be type=text/plain and the target=amp-script like –

<amp-script layout="container" script="inline_amp" class="amp-script-sample">
  <button id="hello2">Click!</button>
</amp-script>
<script id="inline_amp" type="text/plain" target="amp-script">
  const button = document.querySelector('#hello2');
  button.addEventListener('click', () => {
    const h1 = document.createElement('h1');
    h1.textContent = 'Hello World 2!';
    document.body.appendChild(h1);
  });
</script>

Once you created the script then the script won’t work and you will have some error in the console and you just need to add the amp-script-src meta tag

Once you see this error then you just need to copy the key like “sha384 JJ8hybcP8hhYy9N0ruZaJF5DqeLX5R5Aa1Kd4OPrB26C_2Gy33RFc4Z_IBQel0MA” and then you need to go to WordPress Dashboard -> Settings -> Advance Settings -> Enter HTML in Head and then add the meta tag like

<meta
    name="amp-script-src"
    content="sha384-YCFs8k-ouELcBTgzKzNAujZFxygwiqimSqKK7JqeKaGNflwDxaC3g2toj7s_kxWG"
  />

Once you add that meta tag then your amp-script will start working in AMP

That’s it for this tutorial!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.

Ask your Questions Directly!
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!
Updated on May 8, 2020

Was this article helpful?

Related Articles

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support

Comments

  1. Hi,
    I am using ‘Visualizer: Tables and Charts Manager for WordPress’ plugin for data visualization. The shortcode for displaying graphs is working fine with non-amp pages but not on AMP pages. I am using plugin ‘AMP for WP’ by Ahmed Kaludi, Mohammed Kaludi to turn my website into AMP on mobile devices.
    On AMP pages, instead of rendering the graph, Visualizer plugin displays the CSV file which is used for plotting the graph. Visualizer shotcode is working fine on non-AMP pages like https://getaka.co.in/photo/brunette-actresses-in-their-30s/ but not on this https://getaka.co.in/photo/brunette-actresses-in-their-30s/amp/

Leave a Comment