Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#SMX #13A @RudyGalfi
Tips and Insights for Success with Accelerated Mobile Pages
AMP:
Above & Beyond
#SMX #13A @RudyGalfi
Product	Manager,	
AMP	Project	
Rudy Galfi
#SMX #13A @RudyGalfi
9:34 AM
contentbazaar.co/20160314/pi-way
9:34 AM
contentbazaar.co/20160314/pi-way
Lorem ipsum dolor s...
#SMX #13A @RudyGalfi
Goals
Make	
pages	fast	
Be	easy	to	
implement	
Embrace	the		
open	web	
Enable	
monetization
#SMX #13A @RudyGalfi
Accelerated Mobile Pages Project
	
ampproject.org
#SMX #13A @RudyGalfi
#SMX #13A @RudyGalfi
AMP	Library
#SMX #13A @RudyGalfi
Validatable
Spec
	
Requirements	and	restrictions	
ensure	the	right	bits	are	
arranged	in	just	the	rig...
#SMX #13A @RudyGalfi
github.com/ampproject/amphtml
#SMX #13A @RudyGalfi
Fantastic momentum and engagement
DEVELOPERS	HAVE	
ENGAGED	
PULL	REQUESTS	 RELEASES	
7700+ 2100+ 98
D...
#SMX #13A @RudyGalfi
AMPs are just web pages!
HTML5	
(AMP-HTML)	
JavaScript	
(AMP	JS	Library)	
CSS3	
(Custom	styling)	
Cac...
#SMX #13A @RudyGalfi
Local	copy	of	assets	
	Without	an	AMP	cache	 	With	an	AMP	cache	
Web
server
Web	server	
Edge	server	
...
#SMX #13A @RudyGalfi
Local	copy	of	assets	
Web	server	
Edge	server	
Edge	server	
Edge	server	
Edge	server	
Edge	server	
Ed...
#SMX #13A @RudyGalfi
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
Average...
#SMX #13A @RudyGalfi
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
Hand-Tu...
#SMX #13A @RudyGalfi
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
Hand-Tu...
#SMX #13A @RudyGalfi
Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG
Hand-Tu...
#SMX #13A @RudyGalfi
0.7sec	
Median	Load	Time	
AMP Format: Elevated Performance Baseline for All
Data furnished by Google.
#SMX #13A @RudyGalfi
0.7sec	
Median	Load	Time	
for	AMP	
AMP Format: Elevated Performance Baseline for All
Data furnished b...
#SMX #13A @RudyGalfi
Search	 News	
AMP at Google
#SMX #13A @RudyGalfi
AMP at Google
GOOGLE
SEARCH
MARCH APRIL MAY JUNE
google.com (web)
Google Search App for iOS
Google Se...
#SMX #13A @RudyGalfi
AMP Adoption
DOCUMENTS	IN	INDEX	 DOMAINS	
125M+ 640K+
#SMX #13A @RudyGalfi
§ Usable	in	static	(cached)	form	
§ Lazy-load	friendly	
§ This	is	many	things:	
–  News	articles	
–  ...
#SMX #13A @RudyGalfi
Publishing Flow
AMP Cache
CONTENT
PUBLISHER
Ad revenue and analytics data
Publishers	depicted	
are	ex...
#SMX #13A @RudyGalfi
How to make your AMPs discoverable
CONTENT
PUBLISHER
Link Tags
AMP-HTML
HTML
Case	A:	
Paired	AMP	
<li...
#SMX #13A @RudyGalfi
Ads in AMP
§ amp-ad	element	
§ Integration	with	existing	ad	trafficking	workflows	
§ Support	for	most	co...
#SMX #13A @RudyGalfi
Ads in AMP
<amp-ad width="300"
height="250"
type="a9"
data-aax_size="300x250"
data-aax_pubname="test1...
#SMX #13A @RudyGalfi
Analytics in AMP
§ amp-pixel:	For	basic	tracking	pixel	behavior	
§ amp-analytics:	
–  “Measure	once.	...
#SMX #13A @RudyGalfi
Analytics in AMP
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https:...
#SMX #13A @RudyGalfi
Content Access in AMP
§ amp-access	element	
§ Support	for	metering	and	subscriber	sign-in	
§ Client-s...
#SMX #13A @RudyGalfi
§ Explore	AMP’s	web	
components	library	
–  Sidebar	for	navigation	menus	
–  Image	carousels	
–  Ligh...
#SMX #13A @RudyGalfi
AMP support in content management systems
§ WordPress	
–  Self-hosting:	Get	the	plugin:	https://wordp...
#SMX #13A @RudyGalfi
Let’s talk about validation again…
AMP	validation	
Verify	proper	implementation	
according	to	AMP	spe...
#SMX #13A @RudyGalfi
AMP-only validation requirements
§ The	main	AMP	specification:	
https://www.ampproject.org/docs/	
refe...
#SMX #13A @RudyGalfi
AMP-only validation tools
§ #development=1:	Built	into	AMP	and	shows	in	your	browser	console	
§ AMP	V...
#SMX #13A @RudyGalfi
Structured data
§ Top	Stories	articles:	
https://developers.google.com/	
search/docs/data-types/artic...
#SMX #13A @RudyGalfi
Google’s Structured Data Testing Tool
§ https://search.google.com/structured-data/testing-tool
#SMX #13A @RudyGalfi
Google Search Console – AMP Validation Report
§ https://www.google.com/	
webmasters/tools/home		
§ Se...
#SMX #13A @RudyGalfi
Google Search Console – AMP Impression & Click Report
§ Click,	impression,	CTR,	and	position	data	
§ ...
#SMX #13A @RudyGalfi
Your path to AMP
§ Explore	
–  ampproject.org/docs	to	learn	more	and	read	documentation	
–  github.co...
#SMX #13A @RudyGalfi
§ Updated	twice	per	quarter	
§ Focus	areas:	Format,	Analytics,	
Ads,	and	Access	
§ Summarization	of	o...
#SMX #13A @RudyGalfi
LEARN MORE: UPCOMING @SMX EVENTS
THANK YOU!
SEE YOU AT THE NEXT #SMX
Upcoming SlideShare
Loading in …5
×

Tips and Insights for Success with Accelerated Mobile Pages By Rudy Galfi

10,198 views

Published on

From the SMX Advanced Conference in Seattle, Washington, June 22-23, 2016. SESSION: AMP: Above & Beyond. PRESENTATION: Tips and Insights for Success with Accelerated Mobile Pages - Given by Rudy Galfi, @rudygalfi - Google, Product Manager. #SMX #13A

Published in: Marketing
  • Be the first to comment

Tips and Insights for Success with Accelerated Mobile Pages By Rudy Galfi

  1. 1. #SMX #13A @RudyGalfi Tips and Insights for Success with Accelerated Mobile Pages AMP: Above & Beyond
  2. 2. #SMX #13A @RudyGalfi Product Manager, AMP Project Rudy Galfi
  3. 3. #SMX #13A @RudyGalfi 9:34 AM contentbazaar.co/20160314/pi-way 9:34 AM contentbazaar.co/20160314/pi-way 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 contentbazaar.co/20160314/pi-way Page is Slow-Loading Scrolling is Nonresponsive Content Shifts Around The Problems: All Too Familiar…
  4. 4. #SMX #13A @RudyGalfi Goals Make pages fast Be easy to implement Embrace the open web Enable monetization
  5. 5. #SMX #13A @RudyGalfi Accelerated Mobile Pages Project ampproject.org
  6. 6. #SMX #13A @RudyGalfi
  7. 7. #SMX #13A @RudyGalfi AMP Library
  8. 8. #SMX #13A @RudyGalfi Validatable Spec Requirements and restrictions ensure the right bits are arranged in just the right way Web Components Library Toolbox of useful features: Ads, Analytics, Carousels, Lightboxes, Social Embeds, Video Players, etc. What is AMP?
  9. 9. #SMX #13A @RudyGalfi github.com/ampproject/amphtml
  10. 10. #SMX #13A @RudyGalfi Fantastic momentum and engagement DEVELOPERS HAVE ENGAGED PULL REQUESTS RELEASES 7700+ 2100+ 98 Data as of June 15, 2016
  11. 11. #SMX #13A @RudyGalfi AMPs are just web pages! HTML5 (AMP-HTML) JavaScript (AMP JS Library) CSS3 (Custom styling) Caching (AMP Cache)
  12. 12. #SMX #13A @RudyGalfi Local copy of assets Without an AMP cache With an AMP cache Web server Web server Edge server Edge server Edge server Edge server Edge server Edge server Edge server Caching
  13. 13. #SMX #13A @RudyGalfi Local copy of assets Web server Edge server Edge server Edge server Edge server Edge server Edge server Edge server Caching § Faster delivery § Regularize serving speeds from distribution platform point of view § All AMPs must be cacheable by any third-party AMP cache § Google AMP Cache –  “Stale-while-revalidate” model –  Serves from cdn.ampproject.org –  Free for anyone to use –  Documentation: https://developers.google.com/amp/cache
  14. 14. #SMX #13A @RudyGalfi Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG Average Mobile Site
  15. 15. #SMX #13A @RudyGalfi Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG Hand-Tuned Site Average Mobile Site
  16. 16. #SMX #13A @RudyGalfi Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG Hand-Tuned Site Average Mobile Site AMP
  17. 17. #SMX #13A @RudyGalfi Image: https://en.wikipedia.org/wiki/Auto_racing#/media/File:Three-wide_multiple_row_back.JPG Hand-Tuned Site All AMPs Average Mobile Site
  18. 18. #SMX #13A @RudyGalfi 0.7sec Median Load Time AMP Format: Elevated Performance Baseline for All Data furnished by Google.
  19. 19. #SMX #13A @RudyGalfi 0.7sec Median Load Time for AMP AMP Format: Elevated Performance Baseline for All Data furnished by Google. 22.0sec Median Load Time for Non-AMP
  20. 20. #SMX #13A @RudyGalfi Search News AMP at Google
  21. 21. #SMX #13A @RudyGalfi AMP at Google GOOGLE SEARCH MARCH APRIL MAY JUNE google.com (web) Google Search App for iOS Google Search App for Android news.google.com (web) Google News & Weather for iOS Google News & Weather for Android GOOGLE NEWS
  22. 22. #SMX #13A @RudyGalfi AMP Adoption DOCUMENTS IN INDEX DOMAINS 125M+ 640K+
  23. 23. #SMX #13A @RudyGalfi § Usable in static (cached) form § Lazy-load friendly § This is many things: –  News articles –  Blog posts –  Recipes Content types that are suited for AMP –  Product listings –  Travel guides –  Etc. etc.
  24. 24. #SMX #13A @RudyGalfi Publishing Flow AMP Cache CONTENT PUBLISHER Ad revenue and analytics data Publishers depicted are examples for illustrative purposes Platforms depicted are examples for illustrative purposes Link Tags AMP-HTML HTML CACHE PLATFORMS
  25. 25. #SMX #13A @RudyGalfi How to make your AMPs discoverable CONTENT PUBLISHER Link Tags AMP-HTML HTML Case A: Paired AMP <link rel="canonical” href="http://example.publisher.com/article.html" /> <link rel=”amphtml” href="http://example.publisher.com/article.amp.html" /> Canonical documents should already be linking to themselves! <link rel=”canonical” href="http://example.publisher.com/article.html" /> CONTENT PUBLISHER AMP-HTML <link rel=”canonical” href="http://example.publisher.com/article.amp.html" /> Case B: Standalone AMP Just calls itself the canonical.
  26. 26. #SMX #13A @RudyGalfi Ads in AMP § amp-ad element § Integration with existing ad trafficking workflows § Support for most common formats: standard banner ads, HTML5 ads, native ads, ads that resize on user interaction § No restrictions on ad density § Viewability support § Integration with dozens of 3rd party providers: demand sources, sponsored content, data management platforms
  27. 27. #SMX #13A @RudyGalfi 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: Specify ad network (choice of 40+) data-* params: Configure ad call Ads performance in AMP (Source: DoubleClick Ad Exchange, May 2016) § 80%+ of the publishers realizing higher viewability rates § 90%+ of the publishers driving greater engagement with higher CTRs § Majority of the publishers seeing higher eCPMs (Impact and proportion of lift varies by region and how optimized the non-AMP sites are)
  28. 28. #SMX #13A @RudyGalfi Analytics in AMP § amp-pixel: For basic tracking pixel behavior § amp-analytics: –  “Measure once. Report to many.” –  Configuration via JSON. Super flexible. –  Look for vendor configurations from ~20 vendors •  Cuts out guesswork you need to do •  Ensures collection aligns with your vendor –  Or, collect data yourself by sending it to your own servers
  29. 29. #SMX #13A @RudyGalfi Analytics in AMP <amp-analytics> <script type="application/json"> { "requests": { "pageview": "https://example.com/analytics?url=${canonicalUrl} &title=${title}&acct=${account}" }, "vars": { "account": "ABC123" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics> 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Substitution variables • Named expression to collect particular kinds of data • Examples: client ID, timestamp, screen dimensions • Can define your own Triggers • Named expression to collect particular kinds of data • Examples: scroll, click, timer
  30. 30. #SMX #13A @RudyGalfi Content Access in AMP § amp-access element § Support for metering and subscriber sign-in § Client-side content hiding § Publisher uses their own business logic to make access decision § Publisher can track (count) accesses § Integration with amp-analytics
  31. 31. #SMX #13A @RudyGalfi § Explore AMP’s web components library –  Sidebar for navigation menus –  Image carousels –  Lightboxes –  Video players –  Social embeds § Learn about behaviors and features through use case– driven interactive examples Learn through examples with “AMP By Example” AMPByExample.com
  32. 32. #SMX #13A @RudyGalfi AMP support in content management systems § WordPress –  Self-hosting: Get the plugin: https://wordpress.org/plugins/amp/ –  WordPress-hosted: Already enabled – Add “/amp” to a single-post page –  WordPress VIP: Start from plugin, customize, then launch § Drupal –  Get the plugin: https://drupal.org/project/amp
  33. 33. #SMX #13A @RudyGalfi Let’s talk about validation again… AMP validation Verify proper implementation according to AMP spec + Google markup validation Usually feature specific (e.g. Top Stories carousel) Check documentation for other platforms for any additional requirements to have your content appear there
  34. 34. #SMX #13A @RudyGalfi AMP-only validation requirements § The main AMP specification: https://www.ampproject.org/docs/ reference/spec.html § Individual components may have additional validation requirements. Be sure to check the documentation.
  35. 35. #SMX #13A @RudyGalfi AMP-only validation tools § #development=1: Built into AMP and shows in your browser console § AMP Validator Chrome extension
  36. 36. #SMX #13A @RudyGalfi Structured data § Top Stories articles: https://developers.google.com/ search/docs/data-types/articles § General guidelines: https://developers.google.com/ search/docs/guides/mark-up-content
  37. 37. #SMX #13A @RudyGalfi Google’s Structured Data Testing Tool § https://search.google.com/structured-data/testing-tool
  38. 38. #SMX #13A @RudyGalfi Google Search Console – AMP Validation Report § https://www.google.com/ webmasters/tools/home § See errors across your site § Bucketed by category § Reports both kinds of errors: Structured data (Google required) + AMP validation (AMP required)
  39. 39. #SMX #13A @RudyGalfi Google Search Console – AMP Impression & Click Report § Click, impression, CTR, and position data § See AMP-only data using a filtered view
  40. 40. #SMX #13A @RudyGalfi Your path to AMP § Explore –  ampproject.org/docs to learn more and read documentation –  github.com/ampproject/amphtml to connect with the development team § Develop and test –  Start developing AMP files and validate them –  Look into CMS support § Launch: Point to AMP files from canonical articles to make them discoverable and eligible to appear in content platforms
  41. 41. #SMX #13A @RudyGalfi § Updated twice per quarter § Focus areas: Format, Analytics, Ads, and Access § Summarization of open-source project activity and surrounding discussions § At-a-glance themes, quarterly goals and status, 2-quarter outlook AMP Roadmap ampproject.org/roadmap
  42. 42. #SMX #13A @RudyGalfi LEARN MORE: UPCOMING @SMX EVENTS THANK YOU! SEE YOU AT THE NEXT #SMX

×