Over the past few months, Outbrain has been working with Google on its AMP project to address what’s always been a singular focus for this company: improving the user experience with content and how it’s discovered.
For those who may not know, AMP stands for “Accelerated Mobile Pages.” As the name suggests, it’s an open source initiative to build a faster, more beautiful open web – one that is sorely needed for audiences, advertisers and publishers who have shifted to mobile.
We know that the mobile user experience can often be clunky, slow and frustrating. AMP can largely put those days behind us, enabling publishers to create mobile-friendly content that loads instantly for consumers on any screen.
But for the publishing industry at large, AMP is also a chance to redeem some of the missteps that, if we’re honest, have led to an ugly advertising ecosystem that often pits audiences against publishers and advertisers.
A large part of our desire in working with AMP and adapting our network to its standards boils down to this redemption story. How can we create an ecosystem where the interests of aforementioned constituents are aligned? Where the assets publishers need to thrive are as beautiful as the content it compliments? How can we scale content distribution to eliminate any barriers to programming optimal experiences for audiences, with greater efficiency?
AMP is a major step toward that future, and by delivering AMP-powered recommendations for publishers, we’re proud to aid that step. Here’s a look at how Outbrain is incorporating publisher recommendations into the AMP standard:
- Leveraging the amp-iframe object to serve content recommendations for publishers AMP pages
- Each amp-iframe can include multiple widgets
- Widgets id(s) to use are AMP_1,AMP_2,etc widgets – provided to you by your Outbrain account manager
- Clicking an AMP-powered organic recommendation will take the user to a regular HTML page. Eventually the click-through will also be AMP powered.
- Talk with your Outbrain account manager if you require custom fonts
Here’s a sample of an AMP-powered page including Outbrain recommendations optimized for mobile.
The below code must be accompanied by AMP-enabled widgets delivered by Outbrain’s Account Management Team, do not directly install this code with existing widgets.
<amp-iframe width=100 height=100 sandbox="allow-top-navigation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" layout="responsive" frameborder="0" resizable src="https://widgets.outbrain.com/hub/amp.html#htmlURL=http%3A%2F%2F page.permalink.com&URL=https%3A%2F%2F amp.permalink.com&widgetIds=AMP_1,AMP_2&index=0&originTarget=*"> <div overflow tabindex=0 role=button aria-label="Outbrain Recommendations">Outbrain</div> </amp-iframe>
The above code must be accompanied by AMP-enabled widgets delivered by Outbrain’s Account Management Team, do not directly install this code with existing widgets.
|widgetIds (mandatory)||List of widget(s) IDs provided by the Account Manager (multiple widget IDs must be separated with a comma).||widgetIds=AMP_1,AMP_2|
|htmlURL (mandatory)||The URL of the standard html version of the page.||htmlURL=https%3A%2F%2F
|ampURL (mandatory)||The URL of the AMP version of the page.||ampURL=https%3A%2F%2Famp.example.com%2Fpage.html|
|styleFile (optional)||Provide publisher an option to pass CSS file in order to inherit the design for the AMP displayed widget. Consult with Account Manager regarding CSS options.||styleFile=https%3A%2F%2Fwww.somesite.com%2Fassets%2Fstylesheets%2Fsite.css|