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.