At this point, you have probably heard a lot about AMP. Chances are high that you are already running AMP HTML ads on your website. If so, then you can add an AMP video ad to your site. Said that getting started with google AMP video ads can be a bit of a challenge. The simple reason is, they’re not frequently used!
However, AMP has created a simple process that makes it easy to manage video ads for any website (that has AMP-enabled pages). Let’s dive into how we can make AMP video ads work for you.
Table of Contents
So, How to get started with video ads on AMP pages?
You can run two types of video ad formats: in-stream video ads and out-stream video ads. If you produce video content, you can go ahead with an in-stream format. If not, then out-stream should be the choice. We’ve talked about the video ad formats in detail here.
Case 1: When You Have the Original Video Content
If you already have a video player on non-AMP pages, you can do a similar set-up for AMP pages. Ask your video player provider if they support AMP video monetization and help you set up in-stream video ads on AMP pages. Or you can check the list of AMP video players that support AMP video monetization here.
If you don’t have any video player that doesn’t support AMP, there are two approaches to serve in-stream video ads: by using a built-in IMA SDK and HTML5 player OR by using a custom player
How to get started with a built-in IMA SDK and HTML5 player?
By adding <amp-ima-video> component.
The <amp-ima-video> is a custom ad extension to the AMP library that helps you embed an IMA-SDK-enabled* video player and serve in-stream video ads.
To run the AMP component, you must add the following JavaScript in the <head> section of the AMP page:
<script async custom-element="amp-ima-video" src="https://cdn.ampproject.org/v0/amp-ima-video-0.1.js"></script>
*An IMA (Interactive Media Ads) SDK is a solution that helps publishers to implement video ads easily. The implementation may include video ad requesting, reporting, consent management, and more. The goal of IMA-SDK is to reduce the technical complexities associated with video ads. You can read more about it here.
Here’s a snippet of the <amp-ima-video> extension and the attributes it includes:
<amp-ima-video width="640" height="360" layout="responsive" data-tag="videoad.xml" data-poster="poster.png" > <source src="playlist.mp4" type="video/mp4" /> <source src="playlist.webm" type="video/webm" /> <track label="English subtitles" kind="subtitles" srclang="en" src="subtitles.vtt" /> <script type="application/json"> { "locale": "en", "numRedirects": 4 } <script> /amp-ima-video>
Under the hood of <amp-ima-video> component, you can pass the following attributes:
Source: A tag for video content. It acts in the same way as the standard video tag on non-AMP pages.
Data tag: Data tag is used to mention the location from where you want to source your ads. In technical terms, it is the URL for your VAST document.
Data-src: It is the URL of your video content. This attribute is required when you don’t have <source> defined in the <amp-ima-video> component.
Track: It is an optional tag used for adding subtitles to the video.
Script: It is a tag that is used to provide the IMA SDK settings of the video player. As mentioned earlier, IMA SDK settings can include various details related to the video ads such as compliance and support (whether video ad supports VAST 4.2 or not, etc.).
Sidenote: The <amp-ima-video> component provides features such as the ability to auto-play video ads or docking a video ad on scroll, and video analytics — by default.
How to get started with a custom video player?
If you have a custom video player that doesn’t support AMP monetization, you can still serve in-stream video ads by using the <amp-video-iframe> component. Let’s see how to set up ads in AMP via a custom player:
Step #1: To run the component, you need to add the following script to the <head> of your page:
<script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"> </script>
Here’s a snippet of the <amp-video-iframe> extension and the attributes inside it:
<amp-video-iframe layout="responsive" width="16" height="9" src="https://videoplayervendor.example/amp-video-iframe" poster="https://videoplayervendor.example/myposter.jpg" data-param-videoid="MY_VIDEO_ID" data-param-channelid="MY_CHANNEL_ID" > </amp-video-iframe>
Under the hood of <amp-video-iframe> component, you can pass the following attributes:
Src: Used to indicate the source of the video.
Poster: A thumbnail image that is used to display while the video loads.
Data-para: Used to pass custom parameters to the video player.
Layout: Used to specify how the video ad will act (responsive or unresponsive).
Step #2: To make video integrations work, the embedded video player document inside iframe i.e. my-video-player.html must include the following library:
<script async src="https://cdn.ampproject.org/video-iframe-integration-v0.js" ></script> <!-- Wait for API to initialize --> <script> (window.AmpVideoIframe = window.AmpVideoIframe || []).push( onAmpIntegrationReady ); function onAmpIntegrationReady(ampIntegration) { // This callback specifies how the AMP document and the iframed video document talk to each other. } </script>
Note: The library video-iframe-integration-v0.js and amp-video-iframe-0.1.js aren’t the same because the former is added to a non-AMP document that is inside an iframe.
Now that the video document and AMP document can communicate with each other, the next step is to implement video playback events (e.g. muted/unmuted, ad_end/ad_start, etc.) and playback methods, for example, mute/unmute, fullscreenenter/fullscreenexit, etc. AMP offers two types of playback integrations: Ready-made and Custom.
- Readymade integrations:
If you’re using common video frameworks such as Video.JS or JW Player, an AMP function listen() will help you do the basic integration of playback events. Here’s a sample snippet for JW Player integration:
<script src="https://cdn.jwplayer.com/players/UVQWMA4o-kGWxh33Q.js"></script> <script> window.AmpVideoIframe = window.AmpVideoIframe || []).push(function ( ampIntegration ) { ampIntegration.listenTo('jwplayer'); }); /script>
- Custom integrations:
If you don’t use the aforementioned video frameworks, you need to write a custom implementation script to enable the communication path between the video document and the AMP document. There are four methods to do it:
- Method: Controls the video playback
- postEvent: Sends the information about playback events to the host document
- getMetadata: Collects information about the host document
- getIntersection: Collects the video ad viewability data on the host document
Refer to the AMP documentation to learn more about the custom integration methods in detail.
Please note that this method is ideal for publishers who:
- Have a custom video player built with the help of Video.JS OR
- Wants to serve AMP video ads inside the iframe*
*However, it isn’t recommended to serve ads inside iframes because:
- It restricts analytics or ad measurement providers’ capabilities. How would it affect you? First, you will not be able to measure the video ad viewability. Second, it might cause discrepancies in your analytics report and ad performance report.
- By default, iframes in AMP (<amp-video-iframe>) are sandboxed. This means, even if your AMP video ad seems to be loading properly, the click-through to the landing pages might be broken and might not be working as expected. Read more about why you shouldn’t serve AMP ads inside the iframe here.
Case 2: When you don’t have original video content
Out-stream video ad format does not require video content or a video player. So, you can get started with it by using display ad slots even if your editorial content doesn’t have in-house videos.
The process of serving such video ads is pretty much similar to display i.e. using the <amp-ad> component. If you’re already working with ad partners that have support AMP display ads, request them to set up out-stream video ads on your pages.
What’s Next?
Media plays an important role in the user experience of a website. It can be used to maintain user engagement, convey essential information, and increase conversion rates. Said that AMP video components are designed to improve the way videos are displayed on mobile. On top of that, you can add custom analytics code with the help of third-party analytics providers and measure the performance of your AMP video ads.
While we tried our best to help you understand what steps you should take to start with AMP video ads, we’re a click away! If you have any questions regarding this topic or need help with AMP monetization, reach out to us today.
