AMP - amp analytics & conversion
on 2018-06-17
AMP - amp analytics & conversion
Use google analytics must use amp-analytics
component
It can use PHP print template function to view
First include
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
ga click event
Refer - Adding Analytics to your AMP pages
function amp_ga_event_click_template($ga_id, $selector, $cate, $action, $label, $non_interaction = "0")
{
$template = <<<EOF
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "%s"
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "%s",
"request": "event",
"vars": {
"eventCategory": "%s",
"eventAction": "%s",
"eventLabel": "%s"
},
"extraUrlParams": {
"ni": "%s"
}
}
}
}
</script>
</amp-analytics>
EOF;
return printf($template, $ga_id, $selector, $cate, $action, $label, $non_interaction);
}
google adwords conversion
Refer - Using AMP for your AdWords Landing Pages
For landing page pageview
function amp_ga_conversion_pageview_template($conversion_id, $lang = "en", $conversion_label)
{
$template = <<<EOF
<amp-analytics type="googleadwords">
<script type="application/json">
{
"triggers": {
"onVisible": {
"on": "visible",
"request": "conversion"
}
},
"vars": {
"googleConversionId": "%s",
"googleConversionLanguage": "%s",
"googleConversionFormat": "3",
"googleConversionLabel": "%s",
"googleRemarketingOnly": "false"
}
}
</script>
</amp-analytics>
EOF;
return printf($template, $conversion_id, $lang, $conversion_label);
}
For click conversion
function amp_ga_conversion_click_template($ga_id, $selector, $conversion_id, $conversion_label, $non_interaction = "0")
{
$template = <<<EOF
<amp-analytics type="googleadwords">
<script type="application/json">
{
"vars": {
"account": "%s"
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "%s",
"request": "conversion",
"vars": {
"googleConversionId": "%s",
"googleConversionFormat": "3",
"googleConversionLabel": "%s",
"googleRemarketingOnly": "false"
},
"extraUrlParams": {
"ni": "1"
}
}
}
}
</script>
</amp-analytics>
EOF;
return printf($template, $ga_id, $selector, $conversion_id, $conversion_label, $non_interaction);
}
AMP - Accelerated Mobile Pages key point
on 2017-08-25
Intro
Provide some key point & something we need notice
1. meta
In normal page
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
In AMP page
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
2. Default style(Handle render)
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
Format
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
3. Use <style amp-custom>
handle style
-
only one tag in one page
-
Size limit 50k
4. GA use <amp-analytics>
bind by selector
5. AJAX CORS
6. form submit use amp-form
7. absolute link(Must include host name)
8. Validate AMP page
-
Add
#development=1
on url and open browser develop tool console tab. -
Web tool validator.ampproject.org