AMP Ads

AdPlugg can now be used for AMP ads!

AdPlugg is now integrated with AMP (Accelerated Mobile Pages) and you can now use AdPlugg to easily serve any ad that you want into your AMP formatted pages. You can also use AdPlugg to schedule, rotate, and report on the ads that appear in your AMP pages.

What is AMP?

The AMP Project is an initiative led by Google to improve the mobile web.

Loading an entire web site via a mobile browser (on often a shoddy connection) can be a painful experience for the user, often resulting in high bounce rates if the page doesn’t load fast. AMP works to fix all of that by defining a simple page structure and set of tags for displaying a page quickly via a mobile browser.

The standard way to implement AMP is to have two page urls, one regular one and an AMP one. Mobile browsers are told to use the AMP version. Pages that adhere to the AMP standard often load almost twice as fast as a regular web page. This is due to a simplified structure, improved cachability and the elimination (or deferment) of slow loading resources.

You can see what the AMP version of this page looks like here: https://www.adplugg.com/blog/amp-ads/amp

AdPlugg and AMP

AMP has strict standards regarding what can appear on an AMP page. This is one of the ways that it ensures fast load times. In order for an element to appear on an AMP page, it needs to be an officially approved AMP extension.

AdPlugg is now an official AMP extension and a provider of amp ads.

We’ve also integrated with the AMP WordPress plugin from Automattic to make it easy to place ads into your WordPress powered AMP pages.

Note: the instructions below are for WordPress users. If you aren’t using WordPress don’t fret, see the “Non-WordPress Sites” section below for how to drop tags into your AMP pages manually.

1. Install the AMP for WordPress Plugin

First you’ll want to install the AMP WordPress plugin from Automattic. This plugin will create an AMP page for all of your posts and pages. You can access the AMP page by going to http://www.example.com/some-post/amp.

2. Get Version 1.7 (or higher) of the AdPlugg WordPress Ad Plugin

In Version 1.7 of the AdPlugg WordPress Ad Plugin we’ve added the ability to insert ad tags into your AMP pages.

3. Configure Your AdPlugg Ads

If you don’t already have one, create an account at adplugg.com. Next, upload the ads that you want to include in your AMP pages. AdPlugg allows you to upload virtually any kind of ad that you want. This includes image ads, text ads, HTML5 ads, etc. I’d recommend that you create some AdPlugg Ad Zones that are specifically for your AMP ads. You could call them something like “amp-zone-1”, “amp-zone-2”, etc. Once you’ve created your Zones, target your ads to them directly or via an AdPlugg Placement.

4. Add the Ads to Your AMP Pages

The AdPlugg WordPress plugin makes it easy to add ads to your AMP pages by utilizing a system that you are probably already familiar with, the WordPress Widget System! Here’s what you do:

1. Log in to the WordPress administrator.
2. Click AdPlugg in the left menu and then click AMP to go to the new AdPlugg AMP settings page.
3. Check the “Automatic Placement” checkbox. This will enable the feature and create a new Widget Area called “AMP Ads”.
4. Go to Appearance and then Widgets. You should now be able to see the AMP Ads widget area.
5. Drag and drop the AdPlugg Widget into the Widget Area.
6. Configure the Widget by giving it a Zone machine name, width and height.
7. If you want the zone to repeat throughout the Page/Post, check the “default” checkbox to make the widget the default.

5. Check the Output

Check your AMP page or post at /your-post-name/amp – it should now include your AdPlugg ads! Feel free to add more ads, rotation, scheduling etc, from the settings available from your account at adplugg.com! Note: it’s best to limit each of your AMP Zones to only show one ad at a time (you can do this via the Max Ad Count field in the Zone settings).

That should do it, see the contextual help (in the top right of the WordPress Admin) for more details.

Non-WordPress Sites

If you aren’t using WordPress, it’s no big deal, instead of adding the tags via the AMP WordPress Plugin, you can just add them yourself (either manually or programmatically). Just drop a tag like the one below into your AMP page wherever you want your ad to appear:

Example

    <amp-ad width="300" height="250"
        type="adplugg"
        data-access-code="<your access code>"
        data-zone="<amp_zone_2>"
    ></amp-ad>

Change the access code, zone names and sizes in the code above to match your account and requirements.

Simply drop this tag into your AMP page and your ads will appear wherever the tag is placed.

Conclusion

AdPlugg makes it easy to serve, manage and track your AMP ads. If you have any questions, comments or suggestions; please post them to the comments section below!