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.

Get AMPed Now! By Paul Shapiro


Published on

From the SMX West Conference in San Jose, California, March 1-3, 2016. SESSION: Getting AMPed: What You Need To Know About Accelerated Mobile Pages & Google - Given by Paul Shapiro, @fighto - Catalyst, Organic Search Director. #SMX #11A

Published in: Mobile
  • Be the first to comment

Get AMPed Now! By Paul Shapiro

  1. 1. #SMX #11A @fighto Practical Advice About How To Implement AMP ⚡ Get AMPed Now! ⚡
  2. 2. #SMX #11A @fighto Who Am I?
  3. 3. #SMX #11A @fighto 1. About AMP Components 2. How to Add Analytics Tracking 3. How to Include Advertisements 4. How to Validate AMP 5. Rolling AMP on WordPress 6. amp-iframe, the magic extended component Agenda
  4. 4. #SMX #11A @fighto About AMP Components
  5. 5. #SMX #11A @fighto • Images  amp-img • Animated GIFs  amp-anim • YouTube embeds  amp-youtube • Social embeds  amp -facebook, -instagram, -pinterest, -twitter, -vine • TOC/Anchor Jumps  amp-accordion • Analytics codes  amp-analytics • Slideshow pages  amp-carousel ⚡ Heads up on Tags / Components - Highlights EX BI EX EX EX EX EX
  6. 6. #SMX #11A @fighto How to Add Analytics Tracking
  7. 7. #SMX #11A @fighto Head over to your favorite recipe website…
  8. 8. #SMX #11A @fighto Loads 75 Trackers!
  9. 9. #SMX #11A @fighto ⚡ Analytics <amp analytics> Tracking1.js Tracking2.js Tracking3.js
  10. 10. #SMX #11A @fighto <amp-pixel> <amp-analytics> • Standard AMP Component • Can be used for simple analytics systems or tracking pixels (i.e., a non- JavaScript DoubleClick GPT tag) • Configured through “substitute” parameters ⚡ Analytics • Extended AMP Component • In most cases, the go-to analytics solution. More complex analytics set- up, compatibility with many vendors (e.g., Google Analytics, Adobe Analytics, Chartbeat, etc.) • Configured through JSON
  11. 11. #SMX #11A @fighto <head>: <body>: ⚡ Analytics – Google Analytics
  12. 12. #SMX #11A @fighto How to Include Advertisements
  13. 13. #SMX #11A @fighto
  14. 14. #SMX #11A @fighto • AMP has 20+ ad tech partners right now • AdSense • DoubleClick • A9 • etc. • Many can be implemented via <amp-ads> • Greater support via iframe extended component ⚡ Advertisements
  15. 15. #SMX #11A @fighto ⚡ Advertisements – AdSense
  16. 16. #SMX #11A @fighto How to Validate AMP
  17. 17. #SMX #11A @fighto 1) Navigate to your AMP page Discoverable via: <link rel="amphtml" href=""/> Validating ⚡ AMP-HTML
  18. 18. #SMX #11A @fighto 2. Open up Developer Tools in Chrome (Ctrl+Shift+I) 3. Choose the console tab in developer tools: Validating ⚡ AMP-HTML
  19. 19. #SMX #11A @fighto 4. Append the following to the URL and reload the page #development=1 For example: Validating ⚡ AMP-HTML
  20. 20. #SMX #11A @fighto 5. Look for the console to indicate successful validation or show errors Reference for Errors: Validating ⚡ AMP-HTML
  21. 21. #SMX #11A @fighto 6. Validate Schema markup using Google’s Rich Snippet Testing Tool: tool/ Validating ⚡ AMP-HTML BTW Both NewsArticle & BlogPosting types are appearing in Google’s AMP Carousel
  22. 22. #SMX #11A @fighto Google Search Console Validating ⚡ AMP-HTML
  23. 23. #SMX #11A @fighto Multi-Page AMP Validator Tool: Validating ⚡ AMP-HTML
  24. 24. #SMX #11A @fighto Rolling AMP on WordPress
  25. 25. #SMX #11A @fighto Official WordPress AMP Plugin ⚡ WordPress – Easy Way to Play It’s well-documented on GitHub, including information on customization: omattic/amp-wp
  26. 26. #SMX #11A @fighto The plugin may not validate Schema markup. If this happens, edit the class-amp-post-template.php plugin file: ⚡ WordPress – Easy Way to Play Change this: To this:
  27. 27. #SMX #11A @fighto To easily add Google Analytics, add support for “pages,” and tweak design a bit, add the PageFrog Plugin: ⚡ WordPress – Easy Way to Play
  28. 28. #SMX #11A @fighto amp-iframe, the magic extended component
  29. 29. #SMX #11A @fighto • Forms, for lead generation or other purposes • 3rd party JavaScript • Embedded comment systems • Some unsupported ad formats • Videos via players not supported by AMP currently • Interactive visualizations/charts (Google Maps, D3 visualizations, Tableau, etc.) • Unverified: Pop-ups, using sandbox=“allow-popups allow-popups-to-escape-sandbox” ⚡ iframes – The Holy Grail of Unsupported Functionality
  30. 30. #SMX #11A @fighto • Amp-iframe is an extended component: you must include the additional JS library in the <head> of your document • Resource loaded must be https and from another domain/subdomain • Must be at least 600px or 75% of the first viewport away from the top, unless you specify a placeholder. ⚡ iframes – The Rules
  31. 31. #SMX #11A @fighto ⚡ iframes – Placeholder Example <amp-iframe width=300 height=300 sandbox="allow-same-origin allow-popups allow-scripts" layout="responsive" frameborder="0" src=""> <amp img layout="fill" src="" placeholder> </amp-img> </amp-iframe>
  32. 32. #SMX #11A @fighto ⚡ iframes – Sandbox Attribute Source: SandboxValue Description allow-forms Allows the embedded browsing context to submit forms. If this keyword is not used, this operation is not allowed. allow-modals Allows the embedded browsing context to open modal windows. allow-popups Allows popups (like from, target="_blank", showModalDialog). allow-popups-to-escape-sandbox (chrome/opera only) Allows a sandboxed document to open new windows without forcing the sandboxing flags upon them. allow-same-origin Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin. allow-scripts Allows the embedded browsing context to run scripts (but not create pop-up windows).
  33. 33. #SMX #11A @fighto • You will have to make some changes to how your pages are set-up, some tags will be switched out for built-in or extended components. • For tracking pixels, use the amp-pixel component. For analytics (such as GA), use amp-analytics. • AMP supports many ads. They are easily implemented with the amp-ad component. For your ad platform, check the markdown files on GitHub. • You will need to validate your AMP pages, for valid amp-html, and for Schema. Validate and Tweak. • WordPress is an easy way to become familiar with AMP. There are easy- t0-use plugins available. They work well with minor changes. • If something isn’t compatible with AMP, you can usually use amp-iframe. Summary
  34. 34. #SMX #11A @fighto SEE YOU AT THE NEXT #SMX THANK YOU! @fighto
  35. 35. #SMX #11A @fighto Appendix / Learning Resources
  36. 36. #SMX #11A @fighto Some examples of component implantations • More information about adding Google Analytics • AMP GitHub page with documentation (read the .md files) • Google News Lab AMP Hangouts • Docs on AMP Website • Useful videos from @SFHTML5 • AMP Anatomy: • AMP Background: • AMP Q&A: JOOMLA Plugin • ⚡ Appendix - Learning Resources
  37. 37. #SMX #11A @fighto AMP-ads partner information: • (read individual markdown files) AMP-ads test examples • AMP-ads test cases for DoubleClick for Publishers • Paywall information • Google News Lab Hangout: ⚡ Advertisements - Resources