#SMX #11A @fighto Practical Advice About How To Implement AMP ⚡ Get AMPed Now! ⚡
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
#SMX #11A @fightoPractical Advice About How To Implement AMP
⚡ Get AMPed Now! ⚡
#SMX #11A @fighto
Who Am I?
#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
#SMX #11A @fighto
About AMP Components
#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
#SMX #11A @fighto
How to Add Analytics Tracking
#SMX #11A @fightoHead over to your favorite recipe website…
#SMX #11A @fighto
Loads 75 Trackers!
#SMX #11A @fighto
⚡ Analytics
<amp analytics>
Tracking1.js
Tracking2.js
Tracking3.js
#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
#SMX #11A @fighto
<head>:
<body>:
⚡ Analytics – Google Analytics
#SMX #11A @fighto
How to Include Advertisements
#SMX #11A @fightohttp://pshapi.ro/nytadloading
#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
#SMX #11A @fighto
⚡ Advertisements – AdSense
#SMX #11A @fighto
How to Validate AMP
#SMX #11A @fighto
1) Navigate to your AMP page
Discoverable via:<link rel="amphtml" href="http://domain.com/article/amp/"/>
Validating ⚡ AMP-HTML
#SMX #11A @fighto
2. Open up Developer Tools in Chrome (Ctrl+Shift+I)
3. Choose the console tab in developer tools:
Validating ⚡ AMP-HTML
#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
#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
#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
#SMX #11A @fighto
Google Search ConsoleValidating ⚡ AMP-HTML
#SMX #11A @fighto
Multi-Page AMP Validator Tool:http://www.technicalseo.info/seo-tools/amp/
Validating ⚡ AMP-HTML
#SMX #11A @fighto
Rolling AMP on WordPress
#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
#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:
#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
#SMX #11A @fighto
amp-iframe, the magic extended
component
#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
#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
#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>
#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).
#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
#SMX #11A @fightoSEE YOU AT THE NEXT #SMX
THANK YOU!
http://searchwilderness.com @fighto
#SMX #11A @fighto
Appendix /Learning Resources
#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
#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
Related Documents
