javascriptamp-html

Google AMP and custom Javascript

According to the docs, all I need to do is to wrap the block I'd like to "talk to" via Javascript with this:

<amp-script layout="container" src="language-toggle.js">
    // Some basic HTML
</amp-script>

The Javascript file is there, I tested with a simple console.log. Yet the amp-script tag has opacity: 0.7 (AMP default style). Apparently, it needs the class i-amphtml-hydrated to be fully visible. I've been trying to wrap my head around this for a few hours now, even Google could not help me with this.

There are a bunch of ServiceWorker errors in the console, which are also all generated by AMP. I have no idea why they appear or how to get rid of them. This whole AMP thing is a mess for me.

enter image description here

These are the AMP scripts I currently added:

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Carousel and YouTube are working fine.

Could anybody please shed some light onto this?

Solution

  • I highly recommend to enable AMP development mode by adding #development=1 to the URL.

    Relative URL's are not allowed in the src attribute of the amp-script tag (the development parameter would have told you that).

    You can have something like this though:

    <amp-script  width="1" height="1" script="demo"></amp-script>
<script type="text/plain" target="amp-script" id="demo">
  console.log('Foobar');
</script>

    But you will need a matching hash in a meta tag in your head:

    <head>
  ...
<meta
  name="amp-script-src"
  content="sha384-hash"
/>
</head>

    Again, the development parameter will tell you the hash you should use, although you could also disable hash checks during development.

    All of the above will still not hydrate your amp-script element. In order for your element to be hydrated, the script has to actually to something to the DOM, like for example adding a div on a button click:

    <amp-script  layout="container" script="demo">
  <button id="hello">Add headline</button>
</amp-script>
<script type="text/plain" target="amp-script" id="demo">
  console.log('Foobar');
  const button = document.getElementById('hello');
  button.addEventListener('click', () => {
    const h1 = document.createElement('h1');
    h1.textContent = 'Hello World!';
    document.body.appendChild(h1);
  });
</script>

    Be aware that you are quite limited with what you are allowed to do. For example, the above snippet will not work without the event listener, so you can not simply add an element without user interaction.

    The messages regarding the references can safely be ignored - the AMP examples do exaclty the same, the AMP still passes the validation.