Dodawanie Analytics do stron AMP

Przyspieszone strony mobilne (AMP) to platforma umożliwiająca tworzenie stron internetowych z treściami statycznymi, które szybko się renderują. AMP zawiera element <amp-analytics>, który umożliwia pomiar interakcji użytkowników, i ma wbudowaną obsługę Google Analytics.

Podstawowa konfiguracja pomiaru wyświetleń strony

Aby utworzyć podstawową instalację Google Analytics na stronie AMP, skopiuj ten fragment kodu i zastąp <GA_MEASUREMENT_ID> identyfikatorem tagu Google. Znajdź swój identyfikator tagu Google.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Wysyłanie danych do wielu miejsc docelowych

Za pomocą tego samego tagu <amp-analytics> możesz wysyłać dane do wielu miejsc docelowych. Wystarczy, że dodasz nowy identyfikator pomiaru <GA_MEASUREMENT_ID_NEW> do polecenia config.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" },
      "<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Jak to działa

Element <amp-analytics> jest rozszerzonym komponentem AMP i jest wyraźnie włączony w tagu skryptu jako element custom-element.

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

Blok elementów <amp-analytics> jest skonfigurowany tak, aby umożliwić obsługę usług pomiarowych Google. Ustaw wartość atrybutu type dla atrybutu <amp-analytics> na „gtag” (aby włączyć obsługę tagu gtag.js), a atrybut data-credentials na „include” (aby włączyć pliki cookie).

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

AMP nie zezwala na kod JavaScript poza zatwierdzonymi przez siebie bibliotekami, dlatego konfiguracja jest przeprowadzana w formacie JSON. Właściwość gtag_id z prawidłową wartością <GA_MEASUREMENT_ID> jest dodawana do bloku vars, a poniżej podana jest właściwość config z <GA_MEASUREMENT_ID>: {} jako wartość.

Mierzenie zdarzeń

Do pomiaru zdarzeń na stronach AMP używaj funkcji triggers ze zdefiniowanymi wartościami. W konfiguracji reguły używane są te właściwości:

  • selector: selektor arkusza CSS określający element docelowy.
  • on: określa typ zdarzenia.
  • vars: określ typ zdarzenia w elemencie event_name. W razie potrzeby dodaj kolejne parametry.

Ten przykład pokazuje, jak skonfigurować podstawowe zdarzenie Google Analytics. Utwórz regułę o nazwie „button”, która będzie się uruchamiać po kliknięciu elementu o identyfikatorze „the-button”. Ta reguła wyśle do Google Analytics wartość event_namelogin” i wartość methodGoogle”:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Zdarzenia Google Analytics to kategoria zdarzeń charakterystycznych dla Google Analytics, które są powszechnie używane do tworzenia raportów o kampaniach. Te wartości można określić w bloku vars za pomocą parametrów event_category, event_label i value:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Więcej informacji o konfiguracji reguł znajdziesz w dokumentacji amp-analytics.

Modyfikowanie parametrów

Aby zastąpić domyślne parametry Google Analytics lub dodać nowe parametry, dodaj odpowiednie wartości do sekcji parameter bloku config. W tym przykładzie zastępujemy domyślne wartości odsłon i zdarzeń w przypadku zdarzeń page_title i page_location:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

Tag łączący domeny umożliwia zliczenie co najmniej 2 powiązanych witryn w osobnych domenach jako jednej. Określ domeny, które chcesz połączyć z właściwością "linker": { "domains": [...] }:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

Na stronach AMP ze skonfigurowanym Google Analytics opcja tworzenia linków do domeny kanonicznej z AMP Cache jest domyślnie włączona. Aby wyłączyć w Google Analytics możliwość łączenia ruchu z domeny, dodaj "linker": "false" do parametrów konfiguracji:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Szybkość witryny w Universal Analytics

Usługa Google Analytics jest skonfigurowana tak, aby automatycznie zbierać dane o szybkości ruchu w przypadku niewielkiego odsetka ruchu w witrynie. Możesz zmieniać częstotliwość próbkowania, aby zbierać więcej lub mniej danych. Aby ustawić częstotliwość próbkowania na 100%, dodaj do konfiguracji zaznaczony kod:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 100
      }
    }
  }
}
</script>
</amp-analytics>

Aby przerwać zbieranie danych o szybkości witryny, użyj podświetlonego kodu:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 0
      }
    }
  }
}
</script>
</amp-analytics>

Ruch ze stron AMP i innych niż AMP

Ruch AMP domyślnie używa innych identyfikatorów klienta do obsługi ruchu w witrynie. Strony AMP wczytują się szybciej i wyświetlają inne wzorce ruchu niż ich standardowe odpowiedniki, co często oznacza, że wartości ruchu w technologii AMP i innej niż AMP będą różne.

Użycie osobnej usługi do pomiaru ruchu AMP zapewnia lepszą analizę danych i dokładniejszy obraz ruchu. Aby rozróżnić ruch AMP i inny niż AMP, jeśli musisz używać 1 usługi:

  • Użyj wymiaru źródła danych lub wymiaru niestandardowego (Universal Analytics).
  • Użyj niestandardowego parametru zdarzenia (Google Analytics 4).

Debugowanie konfiguracji

Walidator AMP umożliwia sprawdzenie, czy strona jest niezgodna ze specyfikacją AMP HTML. Aby włączyć walidator, dodaj do adresu URL strony fragment #development=1.

Rozszerzenie amp-analytics wyświetla ostrzeżenia i komunikaty o błędach, które ułatwiają debugowanie i rozwiązywanie problemów związanych z konfiguracją. Dodaj #log=1 do adresu URL strony, aby wyświetlić zarejestrowane komunikaty o błędach w konsoli przeglądarki.

Pełny przykład

Ten przykład pokazuje pełną stronę AMP z jednym przyciskiem. Ta konfiguracja będzie wysyłać do Google Analytics standardowe dane o wyświetleniu strony i zdarzenia „button-click”:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>