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.
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.
“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.
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.