examples/analytics.amp.html

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>AMP Analytics</title>
  <link rel="canonical" href="analytics.amp.html" >
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-custom>
    .box {
      background: #ccc;
      border: 1px solid #aaa;
      padding: 10px;
      margin: 10px;
    }
  </style>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>

<amp-analytics id="analytics1">
<script type="application/json">
{
  "transport": {"beacon": false, "xhrpost": false},
  "requests": {
    "base": "https://example.com/?domain=${canonicalHost}&path=${canonicalPath}&title=${title}",
    "event": "${base}&name=${eventName}&type=${eventId}&time=${timestamp}&tz=${timezone}&pid=${pageViewId}&screenSize=${screenWidth}x${screenHeight}"
  },
  "vars": {
    "title": "Example Request"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "event",
      "vars": {
        "eventName": "page-loaded",
        "eventId": "42"
      }
    }
  }
}
</script>
</amp-analytics>

<amp-analytics type="googleanalytics" id="analytics2">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Example Pageview"
      }
    },
    "click on #test1 trigger": {
      "on": "click",
      "selector": "#test1",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-test1"
      }
    },
    "click on #top trigger": {
      "on": "click",
      "selector": "#top",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

<amp-analytics id="analytics3" config="./analytics.config.json"></amp-analytics>

<div class="logo"></div>
<h1 id="top">AMP Analytics</h1>

<span id="test1" class="box">
  Click here to generate an event
</span>

</body>
</html>