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 elemencieevent_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_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, 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>
Domeny linków
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>
Przydatne materiały
- AMP: projekt AMP
- AMP: Co to jest AMP?
- AMP: amp-analytics
- gtag.js: używanie tagu gtag.js na stronach AMP
- Centrum pomocy Universal Analytics: Przyspieszone strony mobilne (AMP)
- Centrum pomocy Google Analytics 4: Przyspieszone strony mobilne (AMP)