get amped now! by paul shapiro
TRANSCRIPT
![Page 1: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/1.jpg)
#SMX #11A @fightoPractical Advice About How To Implement AMP
⚡ Get AMPed Now! ⚡
![Page 2: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/2.jpg)
#SMX #11A @fighto
Who Am I?
![Page 3: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/3.jpg)
#SMX #11A @fighto
1. About AMP Components2. How to Add Analytics Tracking3. How to Include Advertisements4. How to Validate AMP5. Rolling AMP on WordPress6. amp-iframe, the magic extended component
Agenda
![Page 4: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/4.jpg)
#SMX #11A @fighto
About AMP Components
![Page 5: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/5.jpg)
#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
![Page 6: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/6.jpg)
#SMX #11A @fighto
How to Add Analytics Tracking
![Page 7: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/7.jpg)
#SMX #11A @fightoHead over to your favorite recipe website…
![Page 8: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/8.jpg)
#SMX #11A @fighto
Loads 75 Trackers!
![Page 9: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/9.jpg)
#SMX #11A @fighto
⚡ Analytics
<amp analytics>
Tracking1.js
Tracking2.js
Tracking3.js
![Page 10: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/10.jpg)
#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
![Page 11: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/11.jpg)
#SMX #11A @fighto
<head>:
<body>:
⚡ Analytics – Google Analytics
![Page 12: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/12.jpg)
#SMX #11A @fighto
How to Include Advertisements
![Page 13: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/13.jpg)
#SMX #11A @fightohttp://pshapi.ro/nytadloading
![Page 14: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/14.jpg)
#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
![Page 15: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/15.jpg)
#SMX #11A @fighto
⚡ Advertisements – AdSense
![Page 16: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/16.jpg)
#SMX #11A @fighto
How to Validate AMP
![Page 17: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/17.jpg)
#SMX #11A @fighto
1) Navigate to your AMP page
Discoverable via:<link rel="amphtml" href="http://domain.com/article/amp/"/>
Validating ⚡ AMP-HTML
![Page 18: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/18.jpg)
#SMX #11A @fighto
2. Open up Developer Tools in Chrome (Ctrl+Shift+I)
3. Choose the console tab in developer tools:
Validating ⚡ AMP-HTML
![Page 19: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/19.jpg)
#SMX #11A @fighto
4. Append the following to the URL and reload the page
#development=1
For example:
http://domain.com/article-permalink/amp-version/#development=1
Validating ⚡ AMP-HTML
![Page 20: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/20.jpg)
#SMX #11A @fighto
5. Look for the console to indicate successful validation or show errors
Reference for Errors: https://www.ampproject.org/docs/reference/validation_errors.html
Validating ⚡ AMP-HTML
![Page 21: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/21.jpg)
#SMX #11A @fighto
6. Validate Schema markup using Google’s Rich Snippet Testing Tool: https://developers.google.com/structured-data/testing-tool/
Validating ⚡ AMP-HTML
BTW Both NewsArticle & BlogPosting types are appearing in Google’s AMP Carousel
![Page 22: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/22.jpg)
#SMX #11A @fighto
Google Search ConsoleValidating ⚡ AMP-HTML
![Page 23: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/23.jpg)
#SMX #11A @fighto
Multi-Page AMP Validator Tool:http://www.technicalseo.info/seo-tools/amp/
Validating ⚡ AMP-HTML
![Page 24: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/24.jpg)
#SMX #11A @fighto
Rolling AMP on WordPress
![Page 25: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/25.jpg)
#SMX #11A @fighto
Official WordPress AMP Pluginhttps://wordpress.org/plugins/amp/
⚡ WordPress – Easy Way to Play
It’s well-documented on GitHub, including information on customization: https://github.com/Automattic/amp-wp
![Page 26: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/26.jpg)
#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:
![Page 27: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/27.jpg)
#SMX #11A @fighto
To easily add Google Analytics, add support for “pages,” and tweak design a bit, add the PageFrog Plugin:
http://pagefrog.com/
⚡ WordPress – Easy Way to Play
![Page 28: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/28.jpg)
#SMX #11A @fighto
amp-iframe, the magic extended
component
![Page 29: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/29.jpg)
#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
![Page 30: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/30.jpg)
#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
![Page 31: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/31.jpg)
#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="https://domain2.com/page"> <amp img layout="fill" src="http://domain.com/image.jpg" placeholder> </amp-img> </amp-iframe>
![Page 32: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/32.jpg)
#SMX #11A @fighto
⚡ iframes – Sandbox Attribute
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
Sandbox Value Description
allow-formsAllows 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 window.open, 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-originAllows 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).
![Page 33: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/33.jpg)
#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
![Page 34: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/34.jpg)
#SMX #11A @fightoSEE YOU AT THE NEXT #SMX
THANK YOU!
http://searchwilderness.com @fighto
![Page 35: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/35.jpg)
#SMX #11A @fighto
Appendix /Learning Resources
![Page 36: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/36.jpg)
#SMX #11A @fighto
Some examples of component implantations• https://amp-by-example.appspot.com/More information about adding Google Analytics• https://developers.google.com/analytics/devguides/collection/amp-analytics/AMP GitHub page with documentation (read the .md files)• https://github.com/ampproject/amphtmlGoogle News Lab AMP Hangouts• https://www.youtube.com/user/newslabatgoogle/videosDocs on AMP Website• https://www.ampproject.org/docs/get_started/about-amp.htmlUseful videos from @SFHTML5• AMP Anatomy: https://www.youtube.com/watch?v=hVRkG1CQScA• AMP Background: https://www.youtube.com/watch?v=SOx1XfOjJPI• AMP Q&A: https://www.youtube.com/watch?v=1XlJiIIBPnEJOOMLA Plugin• https://weeblr.com/blog/accelerated-mobile-page-for-joomla
⚡ Appendix - Learning Resources
![Page 37: Get AMPed Now! By Paul Shapiro](https://reader036.vdocument.in/reader036/viewer/2022062503/58f110231a28abb4558b45b1/html5/thumbnails/37.jpg)
#SMX #11A @fighto
AMP-ads partner information:• https://
github.com/ampproject/amphtml/tree/master/ads (read individual markdown files)
AMP-ads test examples• https://
github.com/jasti/amp-ads-testing/tree/master/testsAMP-ads test cases for DoubleClick for Publishers• https://dfp-amp-testing-1185.appspot.com/Paywall information• Google News Lab Hangout: https://
youtu.be/yhhWUORdQuM
⚡ Advertisements - Resources