Skip to main content

Troubleshooting AMP Placements

Siva Balan avatar
Written by Siva Balan
Updated over 3 months ago

Fortunately, when dealing with AMP placements, the troubleshooting process is as simple as the integration process. There are only a few things you need to check to make sure everything is working as expected.

📘Not sure what AMP is?

To learn more about AMP please see our Google AMP integration page here.

Not able to Preview/Test AMP Placements?

If you are trying to preview/test an AMP placement and for some reason are unable to view the test ad, there are a couple things you should check to ensure everything is set up correctly.

Requestly Rule

A common issue when previewing/testing AMP placements with the Requestly Chrome extension is that the rule is either not configured or it is not toggled on. To easily switch the Requestly rule on and off:

  • First, “favorite” the rule by clicking the heart icon to the left of the rule when inside the “open app” menu.

  • Once favorited, it’s easy to toggle the rule on and off. Simply click on the Requestly Chrome extension icon and toggle its status to “on”.

  • Ensure that the Requestly extension icon is activated; if the icon appears greyed out, please right click and activate.

  • When Requestly is active, toggled on, and on an AMP page with Nativo serving, you should see the extension icon turn green.

2630

Nativo favorited

1036

Requestly toggled on

Checking Nativo AMP Tag and AMP Section

If you’re still experiencing issues after toggling the Requestly rule, make sure the AMP tag is implemented on the page where you are trying to test/preview as a next step. Once confirmed that the tag is in fact on the page source code, check to make sure the URL being used by the AMP tag is the same URL specified on the Nativo Platform for the AMP section.

To check whether or not the AMP tag is on the page, inspect the DOM and do a search for the Nativo AMP tag.

  1. Open the page you are trying to preview on a browser (Chrome preferably).

  2. Right-click anywhere on the page and select Inspect.

  3. Once the Chrome Dev Tools panel opens up, emulate mobile, make sure you are in the elements tab, and refresh (ctrl/cmd + r).

  4. Bring up the search bar:

    • Command + F (Mac)

    • Ctrl + F (Windows)

  5. Type "data-request-url". This should bring you to the Nativo placement.

2586

Once you confirm the tag is on the page, check that the URL for the parameter data-request-url in the AMP tag matches the amp article URL from the browser navigation bar (the url after the google appended https://www.google.com/amp/s/).

2488

Once you have the data-request-url being used in the AMP tag (and it matches the amp article URL), navigate to the Section that was created for this AMP placement in the Nativo Platform. Ensure the URL in the URL field matches the URL in the AMP tag data-request-url parameter while accounting for wildcards.

Most Article pages use Section URL wildcarding similar to the example below. In short, wildcarding is the act of passing an * (asterisk) as a placeholder. The asterisk can act as a placeholder for any string or characters and can be limited by using either a “/” or by using any standard characters immediately after. Wildcarding allows for 1 section in the Nativo admin to serve multiple pages following the same format. Please reach out to your Platform Success Manager if you need help validating your wildcarded section.

2568

🚧Where is my AMP Section?

If you're not sure how to find the section that was created for the AMP placement in the Nativo platform, reach out to your Platform Success Manager.

Checking the AMP Placement Settings

If you’re still having issues with your AMP placement after checking the AMP tag and the AMP section, we recommend confirming the AMP placement settings in the Nativo Platform.

The image below highlights the three settings that set AMP placements apart. These settings are mandatory for your placements to work:

  • Selector: div

  • Injection Mode: Prepend

  • Device type: Mobile

If any of these settings are incorrect, correct them to match the image below.

1890

AMP Checklist

To help make your job a bit easier, we created this checklist for making sure everything is set up correctly:

  • Check Requestly.

  • Check that the AMP tag is on the page source code.

  • Check that amp article URL Matches the data-request-url in the AMP tag.

  • Check that Section URL Matches or is wildcarded for the amp article url passed in the data-request-url in the AMP tag.

  • Check that the AMP placement has the correct settings.

  • Do a preview/test of the AMP placement to confirm everything is working.

  • If you were able to verify and complete all these checks, the test AMP ad should render.

AMP FAQs

Why is the AMP placement showing as a white space?

The AMP framework automatically collapses the ad unit if there is no fill available. However, if a user scrolls down to the ad unit too quickly, there is a small chance that the ad unit won't have collapsed and the white space will remain.

Can I add the width and height for the AMP tag as inline style?

No. Adding width and height to an AMP placement as an inline style will break the tag and prevent it from working.

Correct AMP tag:

Correct AMP Tag

<code snippet> <amp-ad type="nativo" height="350" width="350" layout="responsive" data-request-url="https://amp.yoursite.com/amp/nativo"></amp-ad> </code snippet>

Incorrect AMP tag:

Incorrect AMP Tag

<code snippet> <amp-ad type="nativo" style="height:350px; width:350;" layout="responsive" data-request-url="https://amp.yoursite.com/amp/nativo"></amp-ad> </code snippet>

📘Questions?

If you have any questions, please reach out to your Platform Success Manager or email [email protected]

Did this answer your question?