68
#SMX #13A @fighto CatalystDigital.com Tips and Tricks for Implementing AMP AMP For Advanced SEOs
| Date post: | 24-Jan-2018 |
| Category: |
Mobile |
| Upload: | search-marketing-expo-smx |
| View: | 11,178 times |
| Download: | 0 times |
#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 Forms2. AMP Analytics3. amp-list4. Other Components Worth Noting5. Validation
#SMX #13A @fighto
CatalystDigital.comCatalystDigital.com
AMP + FormsThe 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-element="amp-form"src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
Step #1
#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>, <formformmethod>
For more info, see section 4.10: http://pshapi.ro/ampformspec
#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 MethodExample
#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 time1 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.
#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-manage.com/subscribe/post"target="_top">
<input type="email" name="MERGE0" placeholder="[email protected]"required>
<input type="hidden" name="u" value="uvalue">
<input type="hidden" name="id" value="idvalue">
<input type="submit" value="Subscribe!">
</form>
Step #2: POST MethodExampleExample
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
Custom Endpoint ExampleExample
For full code of custom endpoint:http://pshapi.ro/mailchimppost
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
<form name="submit" method="post" action-xhr="mailchimp-post.php"target="_top">
<input type="email" name="email" placeholder="[email protected]" 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>
#SMX #13A @fighto
CatalystDigital.com
<form name="submit" method="post" action-xhr="mailchimp-post.php"target="_top">
<input type="email" name="email" placeholder="[email protected]" 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
#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.
#SMX #13A @fighto
CatalystDigital.com
<form name="submit" method="post" action-xhr="mailchimp-post.php"target="_top">
<input type="email" name="email" placeholder="[email protected]" 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>
45
6
#SMX #13A @fighto
CatalystDigital.com
4We 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.
#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 element.
toggleVisibilityToggles 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
#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">
#SMX #13A @fighto
CatalystDigital.comCatalystDigital.com
AMP + AnalyticsClient IDs LOL
#SMX #13A @fighto
CatalystDigital.com
• Great User Experience
• Google Traffic Benefits
• Misreported Bounce Rate
• Inflated Traffic• Clicks to
Internal Links Count as Referral
• Server Logs Won’t Work
#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
#SMX #13A @fighto
CatalystDigital.com
#SMX #13A @fighto
CatalystDigital.com
Google Acknowledges
https://developers.google.com/analytics/devguides/collection/amp-analytics/
#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
#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
Example
Modify your theme’s
functions.php file
#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>m.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
#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>
</amp-analytics>
Example
JSON GOES HERE
#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
#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"
}
}
#SMX #13A @fighto
CatalystDigital.com
More Info:http://pshapi.ro/galikeyamp
#SMX #13A @fighto
CatalystDigital.comCatalystDigital.com
amp-listUnderutilizedPulls in content from
a dynamic JSON endpoint
#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/amplist.php">
<template type="amp-mustache“>
<div>
{{location}}: {{weather}}
</div>
</template>
</amp-list>
JSON Endpoint amp-list Referencing Endpoint
#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 JavaScript for and can’t.Example:• Choosing product variations
in an ecommerce website.
amp-bind
#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.Example:• Live blogging.• Someone made a chatroom
webapp at ampconf.
amp-live-list
#SMX #13A @fighto
CatalystDigital.com
Description:Creates an amp-compatible image slider. Works well with amp-list.Example:• Typical image sliders.
amp-carousel
#SMX #13A @fighto
CatalystDigital.com
Description:Creates collapsible/expandable content sections.Example:• Really useful for creating
navigation menus.
amp-accordion
#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
#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
#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
#SMX #13A @fighto
CatalystDigital.comCatalystDigital.com
ValidationDon’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• Requests package
Ideally AMPBench would run locally, but can be ran off the appspot demo URL.
Bulk Check AMP Pages with AMPBench API
#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 Shapiro Director of Strategy & Innovation
THANK YOU!
#SMX #13A @fighto
CatalystDigital.comCatalystDigital.com
Appendix{{organ joke}}?
#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
#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
#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
#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
