AMP: Above & Beyond By Adam Greenberg

#SMX #12A @adamgreenb

Tips and Insights for Success with Accelerated Mobile Pages

AMP: Above & Beyond


GlobalPartnerships,AMPProject

Adam Greenberg


9:34 AM

contentbazaar.co/20160314/pi-way

9:34 AM


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

9:34 AM


PageLoadsSlowly

ScrollingIsNonresponsive

ContentShiftsAround

The Problems: All Too Familiar…


Goals

Makepagesfast

Beeasytoimplement

Embracetheopenweb

Enablemonetization


Accelerated Mobile Pages Project

ampproject.org



AMPLibrary



Validatable Spec

Requirementsandrestrictions

ensuretherightbitsarearrangedinjusttherightway

Web Components Library

Toolboxofusefulfeatures:

Ads,Analytics,Carousels,Lightboxes,SocialEmbeds,VideoPlayers,etc.

What is AMP?


github.com/ampproject/amphtml


Fantastic momentum and engagement

DEVELOPERSHAVEENGAGED

PULLREQUESTS RELEASES

7700+ 2100+ 98

DataasofJune15,2016


Localcopyofassets

WithoutanAMPcache WithanAMPcache

Web server

WebserverEdgeserver

Edgeserver

Edgeserver

Edgeserver

Edgeserver

Edgeserver

Edgeserver

Caching


Localcopyofassets

WebserverEdgeserver

Edgeserver

Edgeserver

Edgeserver

Edgeserver

Edgeserver

Edgeserver

Caching

§ Fasterdelivery§ Regularizeservingspeedsfromdistributionplatformpointofview

§ AllAMPsmustbecacheablebyanythird-partyAMPcache

§ GoogleAMPCache–  “Stale-while-revalidate”model– Servesfromcdn.ampproject.org–  Freeforanyonetouse– Documentation:https://developers.google.com/amp/cache


Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG

Average Mobile Site



Hand-Tuned Site

Average Mobile Site



Hand-Tuned Site

Average Mobile Site

AMP



Hand-Tuned Site

All AMPs

Average Mobile Site


0.7secMedianLoadTime

forAMP

AMP Format: Elevated Performance Baseline for All

Data furnished by Google.

22.0secMedianLoadTime

forNon-AMP


AMP at Google

GO

OG

LE

SEA

RCH

MARCH APRIL MAY JUNE

google.com (web)

news.google.com (web)

Google News & Weather for iOS & Android

Google Play Newsstand GO

OG

LE

NEW

S

JULY AUG

Search App for Android

Org. Search Dev Preview

Search App for iOS


Integration by non-Google canvases


AMP Adoption

DOCUMENTSININDEX DOMAINS

125M+ 640K+


Case Study: AMP Helping Washington Post Boost Retention


§ Usableinstatic(cached)form§ Lazy-loadfriendly

§ Thisismanythings:–  Newsarticles

–  Blogposts

–  Recipes

Content types that are suited for AMP

–  Productlistings–  Travelguides

–  Etc.etc.


AdsperformanceinAMP(Source:DoubleClickAdExchange,May2016)

§ 80%+ofthepublishersrealizinghigherviewabilityrates§ 90%+ofthepublishersdrivinggreaterengagementwithhigherCTRs§ MajorityofthepublishersseeinghighereCPMs(Impactandproportionofliftvariesbyregionandhowoptimizedthenon-AMPsitesare)

Ads in AMP <amp-ad width="300" height="250" type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302"> </amp-ad>

13 14 15 16 17 18 19

Type:Specifyadnetwork(choiceof40+)

data-*params:Configureadcall


§ amp-pixel:Forbasictrackingpixelbehavior§ amp-analytics:

–  “Measureonce.Reporttomany.”

–  ConfigurationviaJSON.Superflexible.

–  Lookforvendorconfigurationsfrom~20vendors•  Cutsoutguessworkyouneedtodo

•  Ensurescollectionalignswithyourvendor

– Or,collectdatayourselfbysendingittoyourownservers

Analytics in AMP


§ amp-accesselement§ Supportformeteringandsubscribersign-in§ Client-sidecontenthiding§ Publisherusestheirownbusinesslogictomakeaccessdecision

§ Publishercantrack(count)accesses§ Integrationwithamp-analytics

Content Access in AMP

The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.


§ amp-experimentfora/btesting§ Supportfor:

–  Browsingthroughproductsorimages

–  Productlandingpages

–  Exploringrelatedproducts

–  Personalizingexperiencesfordifferentusers

eComm Components for AMP

$


AMP support in content management systems

§ WordPress– Self-hosting:Gettheplugin:https://wordpress.org/plugins/amp/– WordPress-hosted:Alreadyenabled–Add“/amp”toasingle-postpage– WordPressVIP:Startfromplugin,customize,thenlaunch

§ Squarespace– AllowingblogstopublishAMPs

§ Drupal– Gettheplugin:https://drupal.org/project/amp


AMPvalidationVerifyproperimplementation

accordingtoAMPspec

Let’s talk about validation again…

+ GooglemarkupvalidationUsuallyfeaturespecific

(e.g.TopStoriescarousel)

Checkdocumentationforotherplatformsforanyadditionalrequirementstohaveyourcontentappearthere


AMP-only validation tools

§ #development=1:BuiltintoAMPandshowsinyourbrowserconsole

§ AMPValidatorChromeextension


Google’s Structured Data Testing Tool

§ https://search.google.com/structured-data/testing-tool


Google Search Console – AMP Validation Report

§ https://www.google.com/webmasters/tools/home

§ Seeerrorsacrossyoursite§ Bucketedbycategory§ Reportsbothkindsoferrors:Structureddata(Googlerequired)+AMPvalidation(AMPrequired)


Google Search Console – AMP Impression & Click Report

§ Click,impression,CTR,andpositiondata§ SeeAMP-onlydatausingafilteredview


Your path to AMP

§ Explore–  ampproject.org/docstolearnmoreandreaddocumentation– github.com/ampproject/amphtmltoconnectwiththedevelopmentteam

§ Developandtest– StartdevelopingAMPfilesandvalidatethem– LookintoCMSsupport

§ Launch:PointtoAMPfilesfromcanonicalarticlestomakethemdiscoverableandeligibletoappearincontentplatforms


§ Updatedtwiceperquarter§ Focusareas:Format,Analytics,Ads,andAccess

§ Summarizationofopen-sourceprojectactivityandsurroundingdiscussions

§ At-a-glancethemes,quarterlygoalsandstatus,2-quarteroutlook

AMP Roadmap ampproject.org/roadmap


LEARN MORE: UPCOMING @SMX EVENTS

THANK YOU! SEE YOU AT THE NEXT #SMX

Marketing

AMP: Above & Beyond By Adam Greenberg