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 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”. 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>
Domeny linków
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>
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)