AMP

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.