Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
RU
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文 Polski Tiếng việt

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

Important: this documentation is not applicable to your currently selected format ads!

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

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

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

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

Узнайте, как отслеживать число просмотров страницы с помощью 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>