1 0 6000 0 600 120 30 https://headerbidding.co 960 0
site-mobile-logo
site-logo

AMP Ads (AMPHTML Ads) – A Beginner’s Guide for Publishers

AMP Ads
“They load way faster. Users pick up on every small delay, and when the ads load fast, this has a very positive impact on their perception and advertiser performance.”

Since Google launched the Accelerated Mobile Pages (AMP) in 2015, more than 31 million websites have embraced AMP to provide faster, better mobile web experience and grow their business. Publishers like MailOnline Advertising, London Evening Standard, and Independent UK have also implemented strategies to maximize their revenue from the AMP pages.

Primarily, publishers have been leveraging the AMP framework to speed up websites. But many publishers don’t delve into AMPs for their ads due to lack of resources or technical knowledge of the framework. Those who have not started with AMP ads are missing out on the opportunities to speed up their ads and increase the yield.

Since you’re here, we believe you’re looking for AMP ads and ready to grab the attention of advertisers? This article aims to answer that question. But before getting started with AMP ads, let’s have a look at the basics and benefits you are going to receive from AMP ads.

Table of Contents:

What are AMP Ads or AMPHTML Ads?

AMP ads, also known as AMPHTML ads, is a framework for publishers to deliver faster, lighter, and secure ads on their websites. Unlike traditional ads that are written on HTML, AMP ads are created with the help of AMP Open Source Project and according to the AMPHTML ad specifications i.e. a variant of AMP HTML and CSS.

An AMPHTML ad creative must:

  • Use <html4ads> or <html amp4ads> as its enclosing tags,

A simple AMPHTML ad tag looks like below:

Simple AMPHTML ad code

Image Source: AMP Fuel

The AMPHTML ads can be displayed in multiple formats. Here are the three formats that are used more frequently than others:

Carousel AMP HTML ads: As the name implies, such an ad format consists of more than one image in a carousel.

Video Parallax AMPHTML ads: In this type of format, a video ad is displayed on top of a banner image with a parallax effect.

Lightbox AMPHTML ads: These are responsive and expandable display ads that enable the publishers to broadcast advertisers’ brand experience. 

How do AMPHTML ads work?

The working of AMPHTML ads isn’t completely different than usual HTML ads. There is one slight difference that is in the type of ad tag. Let’s see how AMPHTML ads work:

  1. A publisher adds an ad slot on the webpage (AMP) with ad tag amp-ad and informs the RTC-enabled ad network/SSP/exchange that they want to serve AMP ads.
  2. Now, the AMP Runtime (A piece of JavaScript running inside the AMP document that guides the implementation of AMP elements and handles the workload prioritization) sends an ad request to the ad network/SSP/exchange to retrieve the ad.
  3. Then, the network validates the ad creative and signs the creative with the help of the process known as Fast Fetch Implementation*.
  4. Once the creative is validated and signed, the ad network/SSP/exchange responds with the AMPHTML ad and passes it to the AMP Runtime to render the ad on the respective AMP webpage.

Working of AMPHTML ads

Additional Note: AMPHTML ad serving on the non-AMP pages is the same as that on the AMPs. 

*Fast Fetch Implementation is the mechanism that separates an AMP ad request from the ad response as this enables the ad requests to occur earlier on the page and render the ad only when it is about to get viewed. Fast Fetch offers preferential treatment to verified AMPHTML ads than traditional HTML ads. Below is the simple workflow of how Fast Fetch works:

Fast Fetch in AMPHTML ad

Image Source – AMP Dev

What are the Benefits of AMPHTML Ads?

1. AMPHTML ads load as fast as content. 

Unlike regular ads, AMPHTML ads are requested to load earlier in the page rendering process. As a result, such ads are 6x faster than regular ads (especially) on the AMP page. Due to this, AMPHTML ads typically lead to better ROIs for the advertisers because they are as fast and streamlined as AMP pages. 

“They load way faster. Users pick up on every small delay, and when the ads load fast, this has a very positive impact on their perception and advertiser performance.”

– Shaun Zacharia, President & CTO, TripleLift

Additionally, AMPHTML ads are displayed right before the user is about to reach the ad, and if the AMPHTML ad is with animation, then it can be paused when the ad is not in the viewport.

2. AMPHTML ads are lightweight.

AMPHTML ads are 3x lighter than regular ads. A regular ad with 10 trackers will send 10 different requests in sequential order to collect the individual data and information. But an AMPHTML ad can collect all the data at once rather than collecting one by one.

AMPHTML vs HTML ad weight

 

3. AMPHTML ads are less prone to malware.

Every AMPHTML ad is verified by AMP maintainers before serving on the webpages and this enables the publishers to keep their ads protected from malware. As a result, publishers can be assured that the website users aren’t vulnerable to any malicious activities. Besides, AMPHTML ads are rendered into friendly iFrame. 

Not only does this reduce the need for multiple viewability vendors, but it also makes the rendering faster on the page because loading the ad into a cross-domain iFrame takes more time. Consequently, it increases the publishers’ revenue as well as advertisers’ ROI.

Affect of AMPHTML ad on CTRs

In addition to the above-mentioned merits, AMPHTML ads are more engaging and flexible as they can be loaded faster and displayed on both AMP and non-AMP pages. But, shifting to AMPHTML ads on an AMP page can increase the CTR by 48%.

AMPHTML vs HTML ads

Image Source – Google Blog

Here’s what Time Inc. says about serving AMPHTML ads on AMP web pages:

“AMP Ads represent an opportunity to fix key issues with ad experiences on the web. In our tests with TripleLift, AMP Ads are more viewable, up 13% from standard ads on AMP pages. We’ve also seen corresponding improvements in CTRs and eCPMs.”

– Kavata Mbondo, Vice President of Digital Revenue Strategy and Operations, Time Inc (Src).

Now that you know the benefits of AMPHTML ads for your ad business, let’s help you get started with AMP ads.

How to get started with AMPHTML ads?

First thing first. You need an ad server that supports AMPHTML ads because not all ad servers can deliver AMP Ads. Here is a list of ad servers that can help you with AMPHTML ads:

  • Google Ad Manager
  • TripleLift
  • Dianomi
  • AdZerk
  • Google AdSense

For Direct-sold Campaigns:

To start serving your direct-sold AMPHTML ads, you need to create ad creatives according to the AMPHTML ad specifications that we have discussed earlier in the article. As of now, AMP ads’ creatives can be created by Celtra’s Ad Creator and Google Web Designer. Once you’re done with the ad creation process, you can upload the creative in Google Ad Manager and generate the AMP ad tags described later in the article.

For Non-guaranteed Campaigns (Header bidding):

If you want to run header auctions for your AMP ads, it can be done by implementing the Real-Time Configuration. RTC allows the publishers to send 5 callouts to any ad-tech partner for each ad slot.

Just like header bidding can be done with the help of an in-house team or managed service providers, you can set-up RTC by yourself or get help from a vendor specialized in AMP to help you with monetizing the AMP inventories. We have a detailed guide on how RTC helps in monetizing the AMP ads.

To summarize in short, you need the following codes to monetize the AMPHTML ads via Real-Time Configuration:

  • As usual, a header code,
  • Cookie-syncing code (in the case when you integrate a third-party ad-tech partner for the first time), and
  • An AMP ad code.

The process of delivering AMPHTML ads via direct-sold campaigns and non-guaranteed campaigns is pretty much similar to a publisher’s perspective. An AMP ad code for header auction running by an RTC vendor looks like this:

<amp-ad width=320 height=50

type=”server-type”

data-slot=”/21804848220/Parent_ad_unit/Child_ad_unit”

data-multi-size=”320×50″

rtc-config={“urls”:[“wrapper-server-url”]}>

</amp-ad>

Generally, you select Google Publisher Tag for your ad units. But in the case of AMP ads, you need to select the ad tag type “AMP Tag” and paste it on the header of your page.

AMP tag type in GAM

Running an AMPHTML ad doesn’t require publishers to do many changes in their set-up except changing the tag type. 

An example of an AMPHTML ad with an AMP ad code:

AMP ad code example

Image Source – AMPExample

Additional Tip: Similar to HTML ad units, you can report on AMP ad units and analyze the performance.

How to Generate Report on AMP in Google Ad Manager?

To create a report on AMP ad tags, follow these steps:

  • Go to Reporting, and click on New report.
  • In the Dimensions column, select “Request Type” and then select “AMP Ad tag”. 

Select AMP ad tag in dimensions

  • If you want to analyze how AMP ads are performing on AMP pages, then you need to select the dimension “Inventory Type” and “AMP”.

Select AMP in Inventory type

What’s Next?

Google’s approach via Accelerated Mobile Pages (AMP) framework was meant to create a fast-loading format, be it for landing pages or ads. The sluggishness of websites not only affects the user experience and ad revenue for publishers but also affects advertisers’ conversions. So, if you haven’t started with AMP ads, it’s time to start doing it. Have any questions related to AMPHTML ads, ask our AdOps experts today.

Automatad Team

At Automatad, we help publishers to monetize better without hampering the user experience. Our products are live across hundreds of publishers, earning them incremental ad revenue with every passing second. You can request a free audit to get an estimated revenue uplift today.

AMP Ads
Previous Post
Adtech Weekly
Weekly Roundup: IAB'...
Cookieless Era Publishers
Next Post
A Comprehensive Post...
0 Comments
    Leave a Reply