AMP

Przypadki użycia

Niniejszy przewodnik zawiera zestaw typowych przypadków użycia śledzenia zaangażowania użytkowników:

UWAGA — chcesz dodać przypadek użycia? Daj nam znać. Możesz też dodać własne przypadki użycia, patrz Jak wnieść wkład.

Ś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>