AMP Script being moved from into

Resolved

(@darrencarlin)

Hi,

We are having a weird issue with our website. We have code that injects some AMP scripts into the head of our document if the page is an AMP page denoted by a query param of ?amp in the URL.

Here is the code:

<?php  

  function func_name() {
    if ( function_exists( 'amp_is_request' ) && amp_is_request() ) {
      ?>
      <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
      <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
      <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>
      <script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
    <?php
    }
  }

  add_action( 'wp_head', 'func_name' );

The problem is when we load the AMP page that is linked. The consent script appears in the body and the others remain in the head. We are assuming the AMP plugin is moving this script.

Is there anyway we can ensure all these scripts remain in the Head of the document?

Thanks

The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

Plugin Support Milind More
(@milindmore22)

2 years, 2 months ago

Hello @darrencarlin

Thank you for reaching out to us, You don’t need to add the component script manually.

When AMP plugin detects use of AMP component, it will include the required script for it, Any scripts with no component present will result in validation error, or they will be removed by AMP plugin.

E.g.: if you use an <amp-script> component in your page AMP, the plugin will detect its usage and include the required script for it.

We hope this is helpful!
Thread Starter darrencarlin
(@darrencarlin)

2 years, 2 months ago
Hi Milind,

Unfortunately when I simply use <amp-script> tags, all of the scripts appear in the body. I’ve included an updated code example and screenshot to show the issue.
```
  function func_name() {
    if ( function_exists( 'amp_is_request' ) && amp_is_request() ) {
      error_log('AMP Request') // This logs correctly
      ?>
      <amp-script src="https://cdn.ampproject.org/v0.js"></amp-script>
      <amp-script src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></amp-script>
      <amp-script src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></amp-script>
      <amp-script src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></amp-script>
      <style amp-custom>
        .dynamite-block.cta-article-wrapper.video-in-article, 
        .dynamite-block.cta-article-wrapper.video-in-article amp-video-iframe {
          min-width: 100%;
        }
      </style>
    <?php
    }
```
Plugin Author Weston Ruter
(@westonruter)

2 years, 2 months ago

The amp-script tag can only appear in the body. I think you meant to add a script tag, which can appear in the head. However, you do not need to add them manually. They get added by the AMP plugin automatically.

Thread Starter darrencarlin
(@darrencarlin)

2 years, 2 months ago

If I include it as a regular <script/> tag it gets removed on AMP pages.

We are being asked a 3rd party provider to include the consent script in the <Head/> of the page.

Is that possible at all?

Plugin Support Milind More
(@milindmore22)

2 years, 1 month ago

@darrencarlin can you please share reference guide to third-party provider or share the code that they asked to include?

Thread Starter darrencarlin
(@darrencarlin)

2 years, 1 month ago

Hi Milind,

Heres some correspondence which may shed some light on the issue:

****

We noticed a low success rate on your amp inventory. We measure this metric by:

Video imps/(Responses*Win Rate (%)). which means the amount of ads that were actually presented to the users.

We believe the issue may be related to a change in the implementation, specifically the placement of the amp-consent script tag on the body instead of the head.

And it does not contain the ‘custom-element’ as it should.

Could you please remove the line marked above from the body and add this line to the head:

<script async custom-element=”amp-consent” src=”https://cdn.ampproject.org/v0/amp-consent-0.1.js“></script>

****

When we use wp_head function, it doesn’t work, the script is moved from the head to the body. We’re aware now that amp-script tags can only appear in the body. Were just wondering is there a way to achieve having the script tag in the head?

Plugin Support Milind More
(@milindmore22)

2 years, 1 month ago

Hello @darrencarlin

AMP and Custom JavaScript: Understanding the Limitations

AMP prioritizes speed and security. To achieve this, it restricts the use of custom JavaScript on AMP pages. This means you can’t directly include external scripts using <script> tags.

Which means you can’t add <script> tag with URL such as example.com/abc.js

The only scripts allowed are AMP component scripts, which are added by AMP plugin automatically after detecting usage of component.

You cannot include component script within <amp-script>, A component can’t execute a component script as it will only execute in web worker and DOM will not be affected.

Learn more about amp-script from documentation

Why can’t I use custom JavaScript?

Performance: Unrestricted JavaScript can slow down page loading. AMP components are optimized for speed, ensuring a smooth user experience.

Security: External scripts could potentially introduce security risks. AMP components follow strict guidelines to maintain a safe environment.
What are your options?

Leverage AMP Components: There’s a good chance you can achieve what you need with built-in AMP components. Explore the available components (like amp-img, amp-video, amp-form, amp-consent, amp-script, amp-ad) that offer various functionalities.

Check Ad Behavior without Consent: For Ads related issues If you’re concerned about ad performance, try removing consent requirements temporarily to see if ads populate. However, remember to reinstate consent for regular operation.

Consult Your Vendor: If you have specific needs, contact your ad vendor for guidance on how to implement their solution within AMP constraints. They might offer specific instructions.

Explore Component Documentation: Each AMP component has detailed documentation. Refer to the documentation for the components you’re interested in to understand their usage and potential limitations.

Look at Component Examples: Many components have code examples showcasing their implementation. These examples can be a valuable resource for learning how to use them effectively.

We hope this helps!

Plugin Support Milind More
(@milindmore22)

2 years, 1 month ago

@darrencarlin As we didn’t receive a response I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘AMP Script being moved from into’ is closed to new replies.