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.
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!
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); });
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.
Follow these steps to add Adobe Analytics in AMP Step 1: Go to WordPress Admin Area -> AMP…
Core Web Vitals are the subset of Web Vitals that apply to all web pages,…
The following reasons can be shown for non-indexing. Server error (5xx) Your server returned a 500-level…
We have added the Google Analytics 4 ( GA 4 ) integration in AMPforWP v1.0.80.…
In this article, I will show you how to add Dotmetrics Analytics to your AMP…
In this option, we will show you how to modify the H1-H6 size for mobile…