Przypadki użycia
Niniejszy przewodnik zawiera zestaw typowych przypadków użycia śledzenia zaangażowania użytkowników:
Śledzenie odsłon
Dowiedz się, jak śledzić odsłony stron za pomocą składników amp-pixel i amp-analytics.
Użycie składnika amp-pixel
Wysyłaj dane odsłon na określony adres URL za pomocą składnika amp-pixel:
<amp-pixel src="https://foo.com/pixel?"></amp-pixel> Użycie składnika amp-analytics — bez dostawcy usług
Wysyłaj dane odsłon na określony adres URL za pomocą składnika amp-analytics:
<amp-analytics> <script type="application/json"> { "requests": { "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}" }, "vars": { "account": "ABC123" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics> Użycie składnika amp-analytics — googleanalytics
Wysyłaj dane odsłon do Google Analytics (patrz też Śledzenie stron w Google Analytics):
<amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" // Replace with your property ID. }, "triggers": { "trackPageview": { // Trigger names can be any string. trackPageview is not a required name. "on": "visible", "request": "pageview" } } } </script> </amp-analytics> Śledzenie kliknięć na stronie
Dowiedz się, jak śledzić kliknięcia na stronie za pomocą składnika amp-analytics, wysyłając dane zdarzeń na określony adres URL oraz do Google Analytics.
Wysyłanie danych na określony adres URL
W poniższym przykładzie atrybut selector służy do wysyłania zdarzenia click na podany adres URL za każdym razem, gdy użytkownik kliknie link (<a href>):
<amp-analytics> <script type="application/json"> { "requests": { "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}" }, "vars": { "account": "ABC123" }, "triggers": { "trackAnchorClicks": { "on": "click", "selector": "a", "request": "event", "vars": { "eventId": "42", "eventLabel": "clicked on a link" } } } } </script> </amp-analytics> Wysyłanie danych do Google Analytics
W poniższym przykładzie atrybut selector właściwości trigger służy do wysyłania zdarzenia click do Google Analytics po kliknięciu określonego elementu (patrz też Śledzenie zdarzeń AMP w Google Analytics):
<amp-analytics type="googleanalytics" id="analytics3"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" // Replace with your property ID. }, "triggers": { "trackClickOnHeader": { "on": "click", "selector": "#header", "request": "event", "vars": { "eventCategory": "ui-components", "eventAction": "header-click" } } } } </script> </amp-analytics> Śledzenie przewijania
Śledź przewijanie strony za pomocą składnhika amp-analytics. W poniższym przykładzie atrybut scrollspec służy do wysyłania zdarzenia scroll na określony adres URL, gdy strona zostanie przewinięta w pionie o 25%, 50% i 90%. Zdarzenie jest generowane również w razie przewinięcia strony w poziomie do 90% szerokości atrybutu scroll:
<amp-analytics> <script type="application/json"> { "requests": { "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}" }, "vars": { "account": "ABC123" }, "triggers": { "scrollPings": { "on": "scroll", "scrollSpec": { "verticalBoundaries": [25, 50, 90], "horizontalBoundaries": [90] } } } } </script> </amp-analytics> Śledzenie interakcji społecznościowych
Dowiedz się, jak śledzić interakcje społecznościowe za pomocą składnika amp-analytics, wysyłając dane zdarzeń na podany adres URL i do Google Analytics.
Wysyłanie danych na określony adres URL
W poniższym przykładzie atrybut selector służy do wysyłania zdarzenia click na podany adres URL za każdym razem, gdy użytkownik kliknie tweet (#tweet-link):
<amp-analytics> <script type="application/json"> { "requests": { "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}" }, "vars": { "account": "ABC123" }, "triggers": { "trackClickOnTwitterLink": { "on": "click", "selector": "#tweet-link", "request": "event", "vars": { "eventId": "43", "eventLabel": "clicked on a tweet link" } } } } </script> </amp-analytics> Wysyłanie danych do Google Analytics
W poniższym przykładzie atrybut selector właściwości trigger służy do wysyłania zdarzenia po kliknięciu określonego przycisku portalu społecznościowego (patrz też Śledzenie interakcji społecznościowych AMP w Google Analytics):
<amp-analytics type="googleanalytics" id="analytics4"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" // Replace with your property ID. }, "triggers": { "trackClickOnTwitterLink": { "on": "click", "selector": "#tweet-link", "request": "social", "vars": { "socialNetwork": "twitter", "socialAction": "tweet", "socialTarget": "https://www.examplepetstore.com" } } } } </script> </amp-analytics>