Примеры использования

В этом руководстве представлен набор стандартных примеров отслеживания заинтересованности пользователей:

Хотите добавить пример использования? Сообщите нам.

Вы также можете предложить свои примеры использования; см. Как помочь проекту.

Отслеживание просмотров страницы

Узнайте, как отслеживать число просмотров страницы с помощью amp-pixel и amp-analytics.

Использование amp-pixel

Отправка данных pageview на указанный URL-адрес с помощью amp-pixel:

<amp-pixel src="https://foo.com/pixel?"></amp-pixel>

Использование amp-analytics – без поставщика услуг

Отправка данных pageview на указанный URL-адрес с помощью amp-analytics:

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
  },
  "vars": {
    "account": "ABC123"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

Использование amp-analytics совместно с googleanalytics

Отправка данных pageview в Google Analytics (см. также Отслеживание страницы в Google Analytics):

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"  // Replace with your property ID.
  },
  "triggers": {
    "trackPageview": {  // Trigger names can be any string. trackPageview is not a required name.
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

Отслеживание нажатий на странице

Узнайте, как отслеживать нажатия на странице с помощью amp-analytics, отправляя данные событий на указанный URL-адрес и в Google Analytics.

Отправка данных на указанный URL-адрес

Следующий пример использует атрибут selector для отправки события click на указанный URL-адрес каждый раз, когда пользователь нажимает ссылку (<a href>):

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
  },
  "vars": {
    "account": "ABC123"
  },
  "triggers": {
    "trackAnchorClicks": {
      "on": "click",
      "selector": "a",
      "request": "event",
      "vars": {
        "eventId": "42",
        "eventLabel": "clicked on a link"
      }
    }
  }
}
</script>
</amp-analytics>

Отправка данных в Google Analytics

Следующий пример использует атрибут selector триггера trigger для отправки события click в Google Analytics при нажатии конкретного элемента (см. также Отслеживание событий AMP в Google Analytics):

<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"  // Replace with your property ID.
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      }
    }
  }
}
</script>
</amp-analytics>

Отслеживание прокрутки

Вы можете отслеживать прокрутку страницы с помощью amp-analytics. Следующий пример использует атрибут scrollspec для отправки события scroll на указанный URL-адрес, когда страница прокручивается по вертикали на 25%, 50% и 90%. Событие также возникает при прокрутке страницы по горизонтали на 90% от ее ширины:

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
  },
  "vars": {
    "account": "ABC123"
  },
  "triggers": {
    "scrollPings": {
      "on": "scroll",
      "scrollSpec": {
        "verticalBoundaries": [25, 50, 90],
        "horizontalBoundaries": [90]
      }
    }
  }
}
</script>
</amp-analytics>

Отслеживание взаимодействий в социальных сетях

Узнайте, как отслеживать взаимодействия в социальных сетях с помощью amp-analytics, отправляя данные событий на указанный URL-адрес и в Google Analytics.

Отправка данных на указанный URL-адрес

Следующий пример использует атрибут selector для отправки события click на указанный URL-адрес каждый раз, когда пользователь нажимает ссылку Twitter (#tweet-link):

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
  },
  "vars": {
    "account": "ABC123"
  },
  "triggers": {
    "trackClickOnTwitterLink": {
      "on": "click",
      "selector": "#tweet-link",
      "request": "event",
      "vars": {
        "eventId": "43",
        "eventLabel": "clicked on a tweet link"
      }
    }
  }
}
</script>
</amp-analytics>

Отправка данных в Google Analytics

Следующий пример использует атрибут selector триггера trigger для отправки события при нажатии кнопки конкретной социальной сети (см. также Отслеживание взаимодействий в социальных сетях на странице AMP с помощью Google Analytics):

<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y" // Replace with your property ID.
  },
  "triggers": {
    "trackClickOnTwitterLink" : {
      "on": "click",
      "selector": "#tweet-link",
      "request": "social",
      "vars": {
          "socialNetwork": "twitter",
          "socialAction": "tweet",
          "socialTarget": "https://www.examplepetstore.com"
      }
    }
  }
}
</script>
</amp-analytics>