category: AMP

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);
}

Read more

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

Read more