{"id":15555,"date":"2019-12-31T09:57:43","date_gmt":"2019-12-31T09:57:43","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&p=15555"},"modified":"2020-05-08T06:27:17","modified_gmt":"2020-05-08T06:27:17","slug":"how-to-add-custom-scripts-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-custom-scripts-in-amp\/","title":{"rendered":"How to add custom scripts in AMP"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

  1. External Scripts <\/a><\/strong><\/li>
  2. Inline Scripts<\/a><\/strong><\/li><\/ol>\n\n\n\n

    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!<\/p>\n\n\n\n

    1 – External Scripts <\/strong><\/mark><\/h4>\n\n\n\n

    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.<\/p>\n\n\n\n

    Below the script, you need to add posts or pages you want to display amp-script<\/p>\n\n\n\n

    <amp-script layout="container" src="https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/amp-scripts\/custom_amp.js" class="amp-script-sample">\n<button id="hello">Click!<\/button>\n<\/amp-script><\/pre><\/div>\n\n\n\n
     
    There is the script in custom_amp.js and in that file, you need to add the scripts like <\/p>\n\n\n\n
    const button = document.querySelector('#hello');\nbutton.addEventListener('click', () => {\n  const h1 = document.createElement('h1');\n  h1.textContent = 'Hello World!';\n  document.body.appendChild(h1);\n});\n<\/pre><\/div>\n\n\n\n
     2 – Inline Scripts<\/strong><\/mark><\/h4>\n\n\n\n
    You can also declare scripts inline and reference them by id  and
    Note that the type needs to be type=text\/plain<\/code> and the target=amp-script<\/code>  like –  
    <\/p>\n\n\n\n
    <amp-script layout="container" script="inline_amp" class="amp-script-sample">\n  <button id="hello2">Click!<\/button>\n<\/amp-script>\n<script id="inline_amp" type="text\/plain" target="amp-script">\n  const button = document.querySelector('#hello2');\n  button.addEventListener('click', () => {\n    const h1 = document.createElement('h1');\n    h1.textContent = 'Hello World 2!';\n    document.body.appendChild(h1);\n  });\n<\/script><\/pre><\/div>\n\n\n\n
    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  <\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Once you see this error then you just need to copy the key like “sha384 JJ8hybcP8hhYy9N0ruZaJF5DqeLX5R5Aa1Kd4OPrB26C_2Gy33RFc4Z_IBQel0MA<\/strong>”   and then you need to go to  WordPress Dashboard<\/strong> -> Settings<\/strong> ->  Advance Settings<\/strong>  ->  Enter HTML in Head<\/strong> and then add the meta tag like 
      <\/p>\n\n\n\n
    <meta\n    name="amp-script-src"\n    content="sha384-YCFs8k-ouELcBTgzKzNAujZFxygwiqimSqKK7JqeKaGNflwDxaC3g2toj7s_kxWG"\n  \/><\/pre><\/div>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Once you add that meta tag then your amp-script will start working in AMP<\/p>\n\n\n\n