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, który jest wyraźnie włączony jako custom-element w tagu skryptu.

<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 włączyć obsługę usług pomiarowych Google. Ustaw atrybut type dla <amp-analytics> na „gtag” (aby włączyć obsługę gtag.js), a atrybut data-credentials na „włącz pliki cookie”.

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

Strony AMP nie obsługują kodu JavaScript poza własnymi zatwierdzonymi 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 jest dodawana właściwość config z <GA_MEASUREMENT_ID>: {} jako wartość.

Mierzenie zdarzeń

Użyj parametru triggers ze zdefiniowanymi wartościami, aby mierzyć zdarzenia na stronach AMP. 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”. Ten aktywator wyśle do Google Analytics wartość event_name „login” i wartość method „Google”:

<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, często używana 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 konfigurowaniu aktywatorów znajdziesz w dokumentacji amp-analytics.

Modyfikowanie parametrów

Aby zastąpić domyślne parametry Google Analytics lub dodać nowe, dodaj odpowiednie wartości do sekcji parameter bloku config. Ten przykład zastępuje 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 zliczanie co najmniej 2 powiązanych witryn w oddzielnych domenach jako jedną. Wskaż domeny, które chcesz połączyć z usługą "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 skonfigurowaną usługą Google Analytics możliwość tworzenia linków do domeny kanonicznej z pamięci podręcznej AMP jest domyślnie włączona. Aby wyłączyć możliwość łączenia przez Google Analytics 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 witryny dla niewielkiej części ruchu. Możesz zmienić 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 zaznaczonego 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 niż w przypadku ruchu w witrynie. Strony AMP wczytują się szybciej i wyświetlają inne wzorce ruchu niż ich standardowe odpowiedniki, co często oznacza, że w przypadku ruchu na stronach AMP i innych niż AMP otrzymasz różne dane.

Użycie osobnej usługi do pomiaru ruchu AMP umożliwia lepszą analizę danych i dokładniejszy obraz ruchu. Aby rozróżnić ruch na stronach AMP i innych niż AMP, jeśli chcesz używać jednej usługi:

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

Debugowanie konfiguracji

Za pomocą narzędzia do sprawdzania stron AMP możesz sprawdzić, czy strona jest niezgodna ze specyfikacją AMP HTML. Aby włączyć walidator, dodaj #development=1 do adresu URL strony.

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. Taka konfiguracja 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>