AMP
PL
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Tiếng việt

Jak skonfigurować podstawową analitykę dla stron AMP

Platformy analityczne są powszechnie integrowane z witrynami internetowymi za pomocą fragmentów kodu JavaScript inline i wywołań funkcji, które wywołują zdarzenia odsyłane do systemu analitycznego. AMP zapewnia elastyczną składnię konfiguracji JSON, która pozwala na powielanie tego procesu dla kilku partnerów analitycznych.

PORADA — jeśli używasz Google Analytics jako dostawcy usług analityki, dowiedz się więcej o składniku amp-analytics.

Dla kontekstu: analityka na stronach bez AMP

Poniżej widnieje przykład tradycyjnego kodu śledzenia Google Analytics w języku JavaScript. Przepiszemy go na format JSON amp-analytics, ale najpierw spójrzmy na tradycyjne podejście:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

Ten kod JavaScript jest dość prosty; wysyła powiadomienie w celu śledzenia zdarzenia odsłony strony.

Krok 1: dodanie skryptu amp-analytics

Aby odtworzyć tę funkcjonalność w AMP, musimy najpierw dodać bibliotekę składnika amp-analytics do sekcji <head> naszego dokumentu:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Krok 2: dodanie kodu konfiguracyjnego

Następnie należy dodać składnik amp-analytics na końcu sekcji body dokumentu:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

Podobnie jak w przykładzie kodu JavaScript u góry tej strony, ten fragment amp-analytics wyśle do usługi Google Analytics powiadomienie, że strona została wyświetlona.

Aby to określić, ustawiliśmy type googleanalytics, a następnie w JSON utworzyliśmy wyzwalacz, który nazwaliśmy „default pageview”. Wyzwalacz ten będzie uruchamiany, gdy strona będzie widoczna (ze względu na parametr "on": "visible""), a po jego uruchomieniu wyślemy żądanie analityki pageview do usługi Google Analytics wraz z podanymi przez nas zmiennymi vars.

JSON używany do konfiguracji składnika amp-analytics jest bardzo elastycznym formatem opisu wysyłanych danych analitycznych i momentu ich wysyłania. Składnik amp-analytics ma pełne szczegóły dotyczące formatu.

Krok 3: dodanie dalszych wyzwalaczy

Bazując na powyższym przykładzie, możemy dodać następny wyzwalacz o nazwie "click on #header trigger":

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

Jak można się domyślić z nazwy tego nowego wyzwalacza, będzie on uruchomiony po kliknięciu elementu z identyfikatorem "header" (określonym przez właściwości "on": "click" i "selector": "#header"). Gdy wyzwalacz ten zostanie uruchomiony, wyślemy żądanie event do naszego dostawcy usług analityki, określając kilka zmiennych do uwzględnienia w żądaniu.

Jeśli masz niestandardową platformę śledzenia, z którą chcesz się zintegrować, możesz nadal korzystać ze składnika amp-analytics i zdefiniować własne spersonalizowane punkty końcowe adresów URL, a które chcesz wysyłać dane śledzenia. Dowiedz się więcej z dokumentacji referencyjnej składnika amp-analytics.

UWAGA — “UA-YYYY-Y” to przykładowe konto Google Analytics; w razie użycia tego przykładu w swojej witrynie należy je zastąpić kodem śledzenia Google Analytics tej witryny.

PORADA — Jeśli interesuje Cię prostszy systemeśledzenia, możesz przyjrzeć się składnikowi amp-pixel. Jeśli potrzebujesz tylko śledzić odsłony stron, składnik amp-pixel jest rozwiązaniem lżejszym niż amp-analytics, ponieważ ma na celu tylko spełnienie wymagań tradycyjnego śledzenia przy użyciu piksela. Dowiedz się więcej z artykułu Analityka: przewodnik po podstawach.