Now we do have a quality content to share with the world but unless it's a website we're dealing with we don't directly get money for that. So in an effort of supporting our sites (and ourselves, so we can continue doing what we love – providing our audience with the best quality content possible), we inevitably come to utilize some ads on our pages and hope, or even ask our site visitors to get familiar with it, so we eventually get paid for that.
This is one of the reasons AMP was initially developed for – combining ads-rich environment with acceptable speed for a mobile device, since, if a page takes far too long to load due to all the embedded commercial content it is quite probable that the visitor will go away or at least – became a bit jumpy. So, let's take a look - how the ads are being handled in AMP.
Now, since working under AMP in progress, components that are responsible for ads might evolve rapidly in time so it's a good thing to do - check the main project's documentation page, making sure there are no major changes. There are a few ad-handling components in AMP, but, probably, the most common is the amp-ad which is doing pretty much the same thing as amp-embed. They are actually the very same and the only thing making necessary having two tags instead of one is the semantics you put in them and probably – the way they get handled by AMP runtime upon basing on that semantics.
In order to use the amp-ad extension you need to first include it in your page by placing this script tag in your page's head <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script> Here is a tip about this – the amp-ad element might work out as well without including the script from above, but the AMP dev team recommend having it for eventually avoiding future compatibility issues – so better do it this way.
The amp-ad element can get displayed in pretty much all the available AMP layouts like responsive, fill, flex-item, fixed, fixed-height and nodisplay. The amp-ad can't be assigned container layout. We'll take a more detailed look on the AMP layouts and media queries later on. Generally, what is important to note, that the layout gets assigned as a value to the tag's layout custom AMP attribute. The element also requires specifying width and height attributes according to the requirements of the layout being specified.
The identifier of the network which is about to be used gets defined via the type attribute. Since that quite a few ad networks can be used and the list is more or less dynamically changing it is a good idea take a look at its most updated state at the AMP's main page – over here: https://www.ampproject.org/docs/reference/components/amp-ad#supported-ad-networks where you can also get the appropriate values you should assign for the type attribute according to the chosen provider of your ads.
Optionally if the ads you are about to load require loading a network specific script tag you can use the src attribute for defining it. This is purely optional and depends on the specific ad content which is about to be included in your pages.
Most of the networks require a bit more detailed configuration in order to display and function properly. These settings and parameters vary depending on the ad network, but, generally, can be fetched from the page by defining data- attributes with the specific values required. Since it's not all the networks potentially possible you will be using, but probably one or two, it is a good idea making yourself familiar with the specific data- attributes needed in the AMP networks list in the link above. Additionally, you can serve your own custom ads displaying the content you've previously uploaded to your server. If this is your intention, there are some things you need to take care about, along with (of course) uploading the advertisement content in its permanent location.
First, you would want to make sure the content you are about to include does not reside at the same place as the pages in which it's about to be displayed. Like if the pages are on www.mysite.com the ad content must be on www.my-other-site.com or something like that. It should also mandatory use https:// connection.
And finally (if we presume the URLs from the above example), you need to include an extra <meta> tag in your AMP pages having name = " amp-3p-iframe-src " attribute – value pair and the whole absolute URL pointing to your self hosted ad as value of the content attribute.
And a word about styling your amp-ad elements – in order to get a valid AMP code you need to avoid placing your ads content as a child element of a wrapper being styled with the position : fixed declaration. The only element making exception form this rule is the amp-lightbox element.
( inspect the 1st URL in connected topics to read more relating to * marked functions)
- Create particular ad systems on AMP web pages for targeting, revealing, and management objectives.
- Put the identical number of ads on AMP Pages just as your non-AMP web pages to produce maximum revenue for each web page.
- Install the very first commercial instantly, beneath the initial viewport ("below the fold") to provide an optimal site visitor practical experience.
- Unless you are actually operating more advanced CSS or media queries, guarantee your advertisement products are centralized on the web page to supply your site visitors together with an amazing mobile website experience.
- Enable multi-size advertising inquiries on your AMP list to increase advertising auction force and drive earnings.
- Promote ad units on your AMP pages around all of sales channels, providing direct and indirect to enhance contest for your inventory on AMP pages.
- Price your commercial list on AMP webpages just like your selection on non-AMP web pages. Keep an eye on functionality and adjust costs correctly.
- Guarantee all of the advertisement demand ways are competing for a commercial stock list on your AMP web pages to push up the challenge.
- Avoid heavy creatives per IAB standards.
- Stay clear of interstitials or alternative ad formats that produce the material to reflow on advertising load.
- Optimize for viewability via establishing the characteristic: data-loading-strategy = prefer-viewability-over-views
- Place commercials in your AMP video content through maintained players or else amp-iframe to permit profits on all kinds of web content.
- Implement original adds to contend together with screen commercials using multi-sized ad requests, adding demand pressure while offering your readers together with a quality site visitor experience.
- Utilize advertisings on ancillary AMP web pages to create incremental profit :
- Execute new styles for plain sold advertisings to supply your sales team along with high-impact, creative advertisement items:
So basically that's the way you can use the AMP model in order to not only provide for your audience fast quality content but also some subtle and hopefully useful commercial announcements to help your site keep going. Of course, having the ability to place ads in AMP pages as well as in any regular page with AMP Navigation gives you not only the freedom to do it, but also the responsibility of figuring out the best way placing them – like if there are too many ads and at some point the user finds them distracting or even worse – annoying and disturbing from interacting with the main content, you might get traffic results opposite to the ones you are expecting – so, be careful.