Support » Plugin: AMP » How to fix this warning about ‘amp-ad extension .js script’?

  • WPChina

    (@wordpresschina)


    When I use the AMP validator at https://validator.ampproject.org I get only one warning, but I’m unclear how it is being generated and how to fix it. This is the warning I get:

    The tag ‘amp-ad extension .js script’ is missing or incorrect, but required by ‘amp-ad’. This will soon be an error.

    The code it is probably referencing is in my functions.php and looks like this:

    /**
     * Include Google Ads with AMP. This is placed in the theme functions file
     */
    add_action( 'amp_post_template_footer', 'xyz_amp_add_advertisement' );
    function xyz_amp_add_advertisement( $amp_template ) {
        $post_id = $amp_template->get( 'post_id' );
        ?>
        <?php
    { //GOOGLE AD GOES HERE
    printf(' <div class="amp-wp-content"><amp-ad width=auto height=200
        type="adsense"
        data-ad-client="ca-pub-MYNUMBERHERE"
        data-ad-slot="ADSLOTNUMBERHERE">
    </amp-ad></div>');
    }
    ?>
        <?php
    }

    Any idea how to to fix this ‘amp-ad extension .js script’ warning?

    Thank you

Viewing 13 replies - 1 through 13 (of 13 total)
  • Robert

    (@kinderrwindstreamnet)

    I’m getting the same validation error. The AMP Ad documentation states:

    “Required Script:
    <script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script&gt; Note: amp-ad may still work without this script, but we highly recommend it for future compatibility”

    The plugin used to include the script. Seems to be the result of recent plugin updates and waiting for the validation tools to catch up.

    WPChina

    (@wordpresschina)

    Thanks for your research and link. So you mean we *should* include the script for forward compatibility, right? If so, what’s the best way to include this code:

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

    Can I just add it to the printf like this:

    /**
     * Include Google Ads with AMP. This is placed in the theme functions file
     */
    add_action( 'amp_post_template_footer', 'xyz_amp_add_advertisement' );
    function xyz_amp_add_advertisement( $amp_template ) {
        $post_id = $amp_template->get( 'post_id' );
        ?>
        <?php
    { //GOOGLE AD GOES HERE
    printf(' <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
    <div class="amp-wp-content"><amp-ad width=auto height=200
        type="adsense"
        data-ad-client="ca-pub-MYNUMBERHERE"
        data-ad-slot="ADSLOTNUMBERHERE">
    </amp-ad></div>');
    }
    ?>
        <?php
    }
    Robert

    (@kinderrwindstreamnet)

    It might be a production bug per this recent thread: https://github.com/ampproject/amphtml/issues/5025

    My site previously had no AMP validation issues or warnings in the Chrome Developer’s Tool console. There are no validation errors in my Google Search Console. Adsense AMP Ads seem to be working fine.

    Need to wait for the plugin experts to weigh in.

    WPChina

    (@wordpresschina)

    Thank you, yes we’ll wait to see what they have to say

    Btw, in the Tags textfield below, when I enter a tag for “amp” it changes it to an ampersand on submit so it looks like “&”. An unfortunate collision of a plugin’s name with HTML markup 🙁

    I saw the same error. I took the message literally.

    So, It will soon be considered as an error to put amp-ad without having the module explicitly loaded.

    And I did what you did @wordpresschina, printing this line in my header via the amp_post_template_head filter :
    <script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script&gt;

    • This reply was modified 3 years, 2 months ago by bactisme.
    • This reply was modified 3 years, 2 months ago by bactisme.
    WPChina

    (@wordpresschina)

    You mean you added it like this?

    add_action( 'amp_post_template_head', 'xyz_amp_add_amp_ad_js' );
    function xyz_amp_add_amp_ad_js( $amp_template ) {
        $post_id = $amp_template->get( 'post_id' );
        ?>
        <script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script>
        <?php
    }

    Yes

    Robert

    (@kinderrwindstreamnet)

    I fixed it by adding the script before the closing /head tag in my single.php custom template:

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

    Chrome Developer Tools console now shows no warnings or errors.

    WPChina

    (@wordpresschina)

    Great thank you

    WPChina

    (@wordpresschina)

    Are you guys not getting errors?

    I tried this:

    add_action( 'amp_post_template_head', 'xyz_amp_add_amp_ad_js' );
    function xyz_amp_add_amp_ad_js( $amp_template ) {
        $post_id = $amp_template->get( 'post_id' );
        ?>
        <script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script>
        <?php
    }

    But it returns an error on validation because <script> is not allowed. Did I implement it incorrectly?

    WPChina

    (@wordpresschina)

    Anyone have ideas on how to implement correctly? <script> is still showing errors.

    bilal186

    (@bilal186)

    I have resolve this issue by adding script before head tag in amp plugin amp/templates/single.php

    <script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script&gt;

    </head>

    I did this in another way.

    Somewhere in functions.php of your template put this:

    function amp_post_template_data_filter_my($data, $post)
    {
        // extra components
        if (!isset($data['amp_component_scripts']['amp-ad'])) {
            $data['amp_component_scripts']['amp-ad'] = 'https://cdn.ampproject.org/v0/amp-ad-0.1.js';
        }
        return $data;
    }
    add_filter('amp_post_template_data', 'amp_post_template_data_filter_my', 10, 2);

    I’ve came up to this by inspecting the source code of the AMP plugin version 0.4.2.

    I don’t know if this the official way but it fixes the validation warning and it seems cool.

    • This reply was modified 2 years, 11 months ago by DrLightman.
    • This reply was modified 2 years, 11 months ago by DrLightman.
    • This reply was modified 2 years, 11 months ago by DrLightman.
Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘How to fix this warning about ‘amp-ad extension .js script’?’ is closed to new replies.