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 @fighto
CatalystDigital.com
Tips and Tricks for Implementing AMP
AMP For
Advanced
SEOs
#SMX #13A @fighto
CatalystDigital.com
Tips and Tricks for Implementing AMP
AMP For
Advanced
SEOs
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
What I’ll Be Covering
1. AMP Forms
2. AMP Analytics
3. amp-list
4. Other Components ...
#SMX #13A @fighto
CatalystDigital.comCatalystDigital.com
AMP + Forms
The nuances of using the amp-form
component
#SMX #13A @fighto
CatalystDigital.com
In your <head>/ In your <head>/ zombie zombie zombie ei ei
<script async custom-elem...
#SMX #13A @fighto
CatalystDigital.com
Permitted No Soup For You!
• <textarea>
• <select>
• <option>
• <fieldset>
• <label>...
#SMX #13A @fighto
CatalystDigital.com
<form action="https://searchwilderness.com/" method="get" target="_top">
<input name...
#SMX #13A @fighto
CatalystDigital.com
<form action="https://searchwilderness.com/" method="get" target="_top">
<input name...
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
<form name="submit" method="post" action-
xhr="https://searchwilderness.us6.list-man...
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
Custom Endpoint ExampleExample
For full code of custom endpoint:
http://pshapi.ro/ma...
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
<form name="submit" method="post" action-xhr="mailchimp-post.php"
target="_top">
<in...
#SMX #13A @fighto
CatalystDigital.com
<form name="submit" method="post" action-xhr="mailchimp-post.php"
target="_top">
<in...
#SMX #13A @fighto
CatalystDigital.com
1
2
3
This example is using amp-mustache to show a templated message upon
successful...
#SMX #13A @fighto
CatalystDigital.com
<form name="submit" method="post" action-xhr="mailchimp-post.php"
target="_top">
<in...
#SMX #13A @fighto
CatalystDigital.com
4
We create a div with an attribute equal to submit-success.This is part of
AMP’s ev...
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
Actions
Action Description
hide Hides the target element.
show Shows the target elem...
#SMX #13A @fighto
CatalystDigital.com
• submit: Emitted whenever the form is submitted and before the
submission is comple...
#SMX #13A @fighto
CatalystDigital.comCatalystDigital.com
AMP + Analytics
Client IDs LOL
#SMX #13A @fighto
CatalystDigital.com
• Great User
Experience
• GoogleTraffic
Benefits
• Misreported
Bounce Rate
• Inflate...
#SMX #13A @fighto
CatalystDigital.com
Non-AMP Version
(Own Domain)
AMP Version
(Own Domain)
AMP Version
(AMP Cache URL)
DI...
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
Google Acknowledges
https://developers.google.com/analytics/devguides/collection/amp...
#SMX #13A @fighto
CatalystDigital.com
As a precaution, create a separate analytics property so your AMP
traffic doesn’t sk...
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
1
2
3
h/t http://juliencoquet.com
#SMX #13A @fighto
CatalystDigital.com
Proxy Endpoint for Your Analytics Code
Recommendation #2
Caveat: Safari Support
#SMX #13A @fighto
CatalystDigital.com
GTM + WordPress Example Example
Thanks Simo Ahava!
http://pshapi.ro/simoampgtm
Examp...
#SMX #13A @fighto
CatalystDigital.com
• Domain must be on HTTPS
• Ensure amp-analytics component library is added to your ...
#SMX #13A @fighto
CatalystDigital.com
General Google Tag Manager Set-Up
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
GTM Example: Event Tracking
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
OG GA Example: Event Tracking
#SMX #13A @fighto
CatalystDigital.com
<amp-analytics type="googleanalytics">
<script type="application/json">
</script>
</...
#SMX #13A @fighto
CatalystDigital.com{
"vars": {
"account": "UA-24477098-4"
},
"triggers": {
"trackPageview": {
"on": "vis...
#SMX #13A @fighto
CatalystDigital.com
Can use amp-form-submit-success and amp-form-submit-error for
event tracking.
Note: ...
#SMX #13A @fighto
CatalystDigital.com
More Info:
http://pshapi.ro/galikeyamp
#SMX #13A @fighto
CatalystDigital.comCatalystDigital.com
amp-list
Underutilized
Pulls in content from
a dynamic JSON endpo...
#SMX #13A @fighto
CatalystDigital.com
{
"items": [
{
"location": "Mountain View",
"weather": "Rain"
},
{
“location": "Bost...
#SMX #13A @fighto
CatalystDigital.com
• Stock Data
• Weather Data
• Pricing Data
• Blog Comments
• etc.
Example Uses
#SMX #13A @fighto
CatalystDigital.comCatalystDigital.com
Other Components Worth Noting
#SMX #13A @fighto
CatalystDigital.com
Description:
Adds more interactivity to AMP
pages. For the stuff you’d want
to use J...
#SMX #13A @fighto
CatalystDigital.com
https://cdn.ampproject.org/experiments.html
#SMX #13A @fighto
CatalystDigital.com
Description:
Pulls live content in at certain
timed intervals via external
endpoint....
#SMX #13A @fighto
CatalystDigital.com
Description:
Creates an amp-compatible
image slider. Works well with
amp-list.
Examp...
#SMX #13A @fighto
CatalystDigital.com
Description:
Creates collapsible/expandable
content sections.
Example:
• Really usef...
#SMX #13A @fighto
CatalystDigital.com
Description:
Upon clicking, has content fill
the viewport. For image
lightboxes, use...
#SMX #13A @fighto
CatalystDigital.com
Description:
For a traditional image lightbox
experience, whereupon clicking,
users ...
#SMX #13A @fighto
CatalystDigital.com
Description:
Allows for iframe embedding in
amphtml pages.
Example:
• Useful to hack...
#SMX #13A @fighto
CatalystDigital.comCatalystDigital.com
Validation
Don’t wait for Google Search
Console. It’s slow.
#SMX #13A @fighto
CatalystDigital.com
Python Script:
https://www.catalystdigital.com/smx-2017-python
Requires:
• Python
• ...
#SMX #13A @fighto
CatalystDigital.com
AMPBench Script Results
#SMX #13A @fighto
CatalystDigital.com
617-663-1247 | www.CatalystDigital.com
© 2017 Catalyst | All Rights Reserved
Paul Sh...
#SMX #13A @fighto
CatalystDigital.comCatalystDigital.com
Appendix
{{organ joke}}?
#SMX #13A @fighto
CatalystDigital.com
• AMP Analytics Documentation
• https://www.ampproject.org/docs/reference/components...
#SMX #13A @fighto
CatalystDigital.com
• My walkthrough of implementing amp-form
• https://searchwilderness.com/amp-forms/
...
#SMX #13A @fighto
CatalystDigital.com
• amp-bind Documentation
• https://www.ampproject.org/docs/reference/components/amp-...
#SMX #13A @fighto
CatalystDigital.com
• amp-live-list Documentation
• https://www.ampproject.org/docs/reference/components...
Upcoming SlideShare
Loading in …5
×

Tips and Tricks for Implementing AMP By Paul Shapiro

14,546 views

Published on

From the SMX Advanced Conference in Seattle, Washington, June 12-14, 2017. SESSION: AMP for Advanced SEOs. PRESENTATION: Tips and Tricks for Implementing AMP - Given by Paul Shapiro, @fighto - Catalyst, Director of Strategy & Innovation. #SMX #13A

Published in: Mobile
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Tips and Tricks for Implementing AMP By Paul Shapiro

  1. 1. #SMX #13A @fighto CatalystDigital.com Tips and Tricks for Implementing AMP AMP For Advanced SEOs
  2. 2. #SMX #13A @fighto CatalystDigital.com Tips and Tricks for Implementing AMP AMP For Advanced SEOs
  3. 3. #SMX #13A @fighto CatalystDigital.com
  4. 4. #SMX #13A @fighto CatalystDigital.com What I’ll Be Covering 1. AMP Forms 2. AMP Analytics 3. amp-list 4. Other Components Worth Noting 5. Validation
  5. 5. #SMX #13A @fighto CatalystDigital.comCatalystDigital.com AMP + Forms The nuances of using the amp-form component
  6. 6. #SMX #13A @fighto CatalystDigital.com In your <head>/ In your <head>/ zombie zombie zombie ei ei <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> Step #1
  7. 7. #SMX #13A @fighto CatalystDigital.com Permitted No Soup For You! • <textarea> • <select> • <option> • <fieldset> • <label> • <input type="text"> • <input type="submit"> • <amp-selector> • most common form-child elements Permitted Form Tags • <input type="button"> • <input type="file"> • <input type="image"> • <input type="password"> • <form form>, <form formaction>, <form formtarget>, <form formmethod> For more info, see section 4.10: http://pshapi.ro/ampformspec
  8. 8. #SMX #13A @fighto CatalystDigital.com <form action="https://searchwilderness.com/" method="get" target="_top"> <input name="s" placeholder="Search The Blog" type="text" required> <input type="submit" value="Search"> </form> Step #2: GET Method Example
  9. 9. #SMX #13A @fighto CatalystDigital.com <form action="https://searchwilderness.com/" method="get" target="_top"> <input name="s" placeholder="Search The Blog" type="text" required> <input type="submit" value="Search"> </form> Break it down! / Stop, Hammer time 1 2 3 1 2 3 Using standard action attribute. It can only be used with the GET method. Specifying the method as in a usual html form. The target attribute must be either be _blank (new window) or _top.
  10. 10. #SMX #13A @fighto CatalystDigital.com
  11. 11. #SMX #13A @fighto CatalystDigital.com
  12. 12. #SMX #13A @fighto CatalystDigital.com <form name="submit" method="post" action- xhr="https://searchwilderness.us6.list-manage.com/subscribe/post" target="_top"> <input type="email" name="MERGE0" placeholder="email@domain.com" required> <input type="hidden" name="u" value="uvalue"> <input type="hidden" name="id" value="idvalue"> <input type="submit" value="Subscribe!"> </form> Step #2: POST Method ExampleExample
  13. 13. #SMX #13A @fighto CatalystDigital.com
  14. 14. #SMX #13A @fighto CatalystDigital.com Custom Endpoint ExampleExample For full code of custom endpoint: http://pshapi.ro/mailchimppost
  15. 15. #SMX #13A @fighto CatalystDigital.com
  16. 16. #SMX #13A @fighto CatalystDigital.com <form name="submit" method="post" action-xhr="mailchimp-post.php" target="_top"> <input type="email" name="email" placeholder="email@domain.com" required> <input type="submit" value="Subscribe!"> <div submit-success> <template type="amp-mustache"> Thanks! Check {{email}} to confirm your subscription to the newsletter. </template> </div> </form> Step #2: POST Method ExampleExample <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  17. 17. #SMX #13A @fighto CatalystDigital.com <form name="submit" method="post" action-xhr="mailchimp-post.php" target="_top"> <input type="email" name="email" placeholder="email@domain.com" required> <input type="submit" value="Subscribe!"> <div submit-success> <template type="amp-mustache"> Thanks! Check {{email}} to confirm your subscription to the newsletter. </template> </div> </form> Break it down! / Stop, Hammer time <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>1 2 3
  18. 18. #SMX #13A @fighto CatalystDigital.com 1 2 3 This example is using amp-mustache to show a templated message upon successful form submission, so we must include the library in our <head>. We specify the POST method in the method attribute. – Using the POST method, we are unable to use the action attribute. Instead, we must use the action-xhr attribute. – This means we have to make an XMLHttpRequest request (AJAX). – The value is equal to our custom endpoint, which is https, follows the AMP CORS spec, and returns JSON.
  19. 19. #SMX #13A @fighto CatalystDigital.com <form name="submit" method="post" action-xhr="mailchimp-post.php" target="_top"> <input type="email" name="email" placeholder="email@domain.com" required> <input type="submit" value="Subscribe!"> <div submit-success> <template type="amp-mustache"> Thanks! Check {{email}} to confirm your subscription to the newsletter. </template> </div> </form> Break it down! / Stop, Hammer time <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script> 4 5 6
  20. 20. #SMX #13A @fighto CatalystDigital.com 4 We create a div with an attribute equal to submit-success.This is part of AMP’s event system. Upon successful form submission, the div is displayed. 5 We are leveraging the amp-mustsache component, a template engine, to print the value returned by our JSON endpoint. 6 The JSON key value for email is reproduced on the AMP page where {{email}} appears.
  21. 21. #SMX #13A @fighto CatalystDigital.com
  22. 22. #SMX #13A @fighto CatalystDigital.com
  23. 23. #SMX #13A @fighto CatalystDigital.com Actions Action Description hide Hides the target element. show Shows the target element. toggleVisibility Toggles the visibility of the target element. <div id="warning-message">Warning...</div> <button on="tap:warning-message.hide">Cool, thanks!</button> http://pshapi.ro/ampformactions
  24. 24. #SMX #13A @fighto CatalystDigital.com • submit: Emitted whenever the form is submitted and before the submission is complete. • submit-success: Emitted whenever the form submission is done and the response is a success. • submit-error: Emitted whenever the form submission is done and the response is an error. Events <div id="warning-message">Warning...</div> <form ... on="submit-success:warning-message.hide">
  25. 25. #SMX #13A @fighto CatalystDigital.comCatalystDigital.com AMP + Analytics Client IDs LOL
  26. 26. #SMX #13A @fighto CatalystDigital.com • Great User Experience • GoogleTraffic Benefits • Misreported Bounce Rate • InflatedTraffic • Clicks to Internal Links Count as Referral • Server Logs Won’tWork
  27. 27. #SMX #13A @fighto CatalystDigital.com Non-AMP Version (Own Domain) AMP Version (Own Domain) AMP Version (AMP Cache URL) DIFFERENT CLIENT ID DIFFERENT CLIENT ID DIFFERENT CLIENT ID
  28. 28. #SMX #13A @fighto CatalystDigital.com
  29. 29. #SMX #13A @fighto CatalystDigital.com Google Acknowledges https://developers.google.com/analytics/devguides/collection/amp-analytics/
  30. 30. #SMX #13A @fighto CatalystDigital.com As a precaution, create a separate analytics property so your AMP traffic doesn’t skew everything OR use content groupings. Recommendation #1
  31. 31. #SMX #13A @fighto CatalystDigital.com
  32. 32. #SMX #13A @fighto CatalystDigital.com 1 2 3 h/t http://juliencoquet.com
  33. 33. #SMX #13A @fighto CatalystDigital.com Proxy Endpoint for Your Analytics Code Recommendation #2 Caveat: Safari Support
  34. 34. #SMX #13A @fighto CatalystDigital.com GTM + WordPress Example Example Thanks Simo Ahava! http://pshapi.ro/simoampgtm Example Modify your theme’s functions.php file
  35. 35. #SMX #13A @fighto CatalystDigital.com • Domain must be on HTTPS • Ensure amp-analytics component library is added to your <head>: • Add to AMP page’s body: Prerequisites & Code to Add to AMP Pages <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp- analytics-0.1.js"></script> <amp-analytics config="//www.yourdomain.com/wp-json/amp-gtm/amp.json?id=GTM- XXXXXX&gtm.url=SOURCE_URL" data-credentials=include></amp-analytics> 1 2 1 config is set to our custom GTM endpoint we created within our functions.php file. 2 We specify our associated GTM ID
  36. 36. #SMX #13A @fighto CatalystDigital.com General Google Tag Manager Set-Up
  37. 37. #SMX #13A @fighto CatalystDigital.com
  38. 38. #SMX #13A @fighto CatalystDigital.com
  39. 39. #SMX #13A @fighto CatalystDigital.com
  40. 40. #SMX #13A @fighto CatalystDigital.com GTM Example: Event Tracking
  41. 41. #SMX #13A @fighto CatalystDigital.com
  42. 42. #SMX #13A @fighto CatalystDigital.com
  43. 43. #SMX #13A @fighto CatalystDigital.com OG GA Example: Event Tracking
  44. 44. #SMX #13A @fighto CatalystDigital.com <amp-analytics type="googleanalytics"> <script type="application/json"> </script> </amp-analytics> Example JSON GOES HERE
  45. 45. #SMX #13A @fighto CatalystDigital.com{ "vars": { "account": "UA-24477098-4" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" }, "trackEmail" : { "on": "click", "selector": "div#emailform > form > input[type=email]", "request": "event", "vars": { "eventCategory": "Form Submit", "eventAction": "Submit Button Click", "eventLabel": "${sourceUrl}" } } } } 1 2 3 Set GA tracking id in vars Set-up pageview request in triggers Set-up event in triggers. Use eventCategory, eventAction, eventLabel
  46. 46. #SMX #13A @fighto CatalystDigital.com Can use amp-form-submit-success and amp-form-submit-error for event tracking. Note: AMP Forms + AMP Analytics "triggers": { "formSubmit": { "on": "amp-form-submit", "request": "searchEvent" } }
  47. 47. #SMX #13A @fighto CatalystDigital.com More Info: http://pshapi.ro/galikeyamp
  48. 48. #SMX #13A @fighto CatalystDigital.comCatalystDigital.com amp-list Underutilized Pulls in content from a dynamic JSON endpoint
  49. 49. #SMX #13A @fighto CatalystDigital.com { "items": [ { "location": "Mountain View", "weather": "Rain" }, { “location": "Boston", "weather": "Sun" } ] } <amp-list width="auto" height="100" layout="fixed-height" src="https://searchwilderness.com/ampl ist.php"> <template type="amp-mustache“> <div> {{location}}: {{weather}} </div> </template> </amp-list> JSON Endpoint amp-list Referencing Endpoint
  50. 50. #SMX #13A @fighto CatalystDigital.com • Stock Data • Weather Data • Pricing Data • Blog Comments • etc. Example Uses
  51. 51. #SMX #13A @fighto CatalystDigital.comCatalystDigital.com Other Components Worth Noting
  52. 52. #SMX #13A @fighto CatalystDigital.com Description: Adds more interactivity to AMP pages. For the stuff you’d want to use JavaScript for and can’t. Example: • Choosing product variations in an ecommerce website. amp-bind
  53. 53. #SMX #13A @fighto CatalystDigital.com https://cdn.ampproject.org/experiments.html
  54. 54. #SMX #13A @fighto CatalystDigital.com Description: Pulls live content in at certain timed intervals via external endpoint. Example: • Live blogging. • Someone made a chatroom webapp at ampconf. amp-live-list
  55. 55. #SMX #13A @fighto CatalystDigital.com Description: Creates an amp-compatible image slider. Works well with amp-list. Example: • Typical image sliders. amp-carousel
  56. 56. #SMX #13A @fighto CatalystDigital.com Description: Creates collapsible/expandable content sections. Example: • Really useful for creating navigation menus. amp-accordion
  57. 57. #SMX #13A @fighto CatalystDigital.com Description: Upon clicking, has content fill the viewport. For image lightboxes, use amp-image- lightbox. Example: • Basically creates a modal popup amp-lightbox
  58. 58. #SMX #13A @fighto CatalystDigital.com Description: For a traditional image lightbox experience, whereupon clicking, users gets an image that fills the viewport. Example: • Image galleries • Expanded functionality coming soon amp-image-lightbox
  59. 59. #SMX #13A @fighto CatalystDigital.com Description: Allows for iframe embedding in amphtml pages. Example: • Useful to hack functionality when something is unsupported. • Can be used anywhere on page with placeholder image amp-iframe
  60. 60. #SMX #13A @fighto CatalystDigital.comCatalystDigital.com Validation Don’t wait for Google Search Console. It’s slow.
  61. 61. #SMX #13A @fighto CatalystDigital.com Python Script: https://www.catalystdigital.com/smx-2017-python Requires: • Python • Requests package Ideally AMPBench would run locally, but can be ran off the appspot demo URL. Bulk Check AMP Pages with AMPBench API
  62. 62. #SMX #13A @fighto CatalystDigital.com AMPBench Script Results
  63. 63. #SMX #13A @fighto CatalystDigital.com 617-663-1247 | www.CatalystDigital.com © 2017 Catalyst | All Rights Reserved Paul Shapiro Director of Strategy & Innovation THANK YOU!
  64. 64. #SMX #13A @fighto CatalystDigital.comCatalystDigital.com Appendix {{organ joke}}?
  65. 65. #SMX #13A @fighto CatalystDigital.com • AMP Analytics Documentation • https://www.ampproject.org/docs/reference/components/amp-analytics • Google Analytics' Dev Guide for AMP Analytics: • https://developers.google.com/analytics/devguides/collection/amp-analytics/ • Google Analytics Measurement Protocol • https://developers.google.com/analytics/devguides/collection/protocol/v1/devguide • AMP By Example – AMP Analytics Page • https://ampbyexample.com/components/amp-analytics/ • Simo Ahava’s Post • https://www.simoahava.com/analytics/google-analytics-client-id-amp-pages/ • AMP HTML URL Variable Substitutions • https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md amp-analytics Resources
  66. 66. #SMX #13A @fighto CatalystDigital.com • My walkthrough of implementing amp-form • https://searchwilderness.com/amp-forms/ • amp-form documentation • https://www.ampproject.org/docs/reference/components/amp-form • AMP CORS Spec • https://github.com/ampproject/amphtml/blob/master/spec/amp-cors-requests.md • Actions and Events in AMP • https://github.com/ampproject/amphtml/blob/master/spec/amp-actions-and-events.md • AMP Start UI Components • https://www.ampstart.com/components amp-form
  67. 67. #SMX #13A @fighto CatalystDigital.com • amp-bind Documentation • https://www.ampproject.org/docs/reference/components/amp-bind • AMP Product Page Example • https://ampbyexample.com/samples_templates/product_page/ • Enable AMP Experiments • https://cdn.ampproject.org/experiments.html • Apply for Origin Trials • http://pshapi.ro/amporigintrials • amp-list Documentation • https://www.ampproject.org/docs/reference/components/amp-list Other Components
  68. 68. #SMX #13A @fighto CatalystDigital.com • amp-live-list Documentation • https://www.ampproject.org/docs/reference/components/amp-live-list • amp-carousel Documentation • https://www.ampproject.org/docs/reference/components/amp-carousel • amp-accordion Documentation • https://www.ampproject.org/docs/reference/components/amp-accordion • amp-iframe Documentation • https://www.ampproject.org/docs/reference/components/amp-iframe Other Components - Continued

×