Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Konfigurowanie tagu AMP

Projekt przyspieszonych stron mobilnych (AMP) to platforma internetowa typu open source, która pomaga zwiększyć wydajność treści w internecie. AMP ma wbudowaną obsługę tagu Google i Menedżera tagów Google. Z tego przewodnika dowiesz się, jak skonfigurować Google Analytics na stronach AMP.

Instalacja

Tag Google umożliwia instalowanie na stronach AMP usług Google Analytics, Google Ads i innych usług Google. Menedżer tagów Google konfiguruje kontener AMP i umożliwia tworzenie zaawansowanych konfiguracji oraz wdrażanie tagów innych firm z poziomu interfejsu Menedżera tagów.

Wybierz preferowaną platformę, klikając jeden z tych przycisków:

Tag Google

Implementacja tagu gtag.js w AMP korzysta z biblioteki amp-analytics, która umożliwia konfigurowanie analityki w witrynie AMP. Dane mogą być wysyłane ze stron AMP do Google Ads, Google Analytics i innych usług Google z tej samej implementacji tagu gtag.js.

Instalacja

Aby skonfigurować gtag.js na stronie AMP, najpierw upewnij się, że w tagu <head> na stronie znajduje się komponent amp-analytics:

<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>

Następnie dodaj tag Google do strony AMP jako komponent JSON w tagu <body> na stronie. Zastąp ciąg <TARGET_ID> identyfikatorem tagu usług (np. Google Ads, Google Analytics), do których chcesz wysyłać dane:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Aby skonfigurować kilka usług w tagu Google, nie musisz instalować całego tagu z danej usługi. Wystarczy dodać identyfikator miejsca docelowego do osobnego polecenia config.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

Więcej informacji znajdziesz w dokumentacji amp-analytics.

Aktywatory zdarzeń

Aby wysyłać do usług konkretne dane, skonfiguruj czynniki uruchamiające na podstawie zdarzeń, takich jak kliknięcia. Reguły dla gtag.js w AMP są zgodne z tymi samymi wzorcami JSON co inne amp-analytics konfiguracje reguł.

Ten przykład pokazuje, jak wysłać zdarzenie click do Google Analytics. Wartość selector to selektor CSS, który pozwala określić, który element jest docelowy. Wartość on określa typ zdarzenia, którym w tym przypadku jest zdarzenie click. W sekcji vars określ typ zdarzenia w event_name i w razie potrzeby dodaj dodatkowe parametry.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

Oprócz zalecanych zdarzeń możesz określić własne zdarzenia niestandardowe.

Wysyłanie wymiarów i parametrów niestandardowych za pomocą Google Analytics

Aby wysyłać do Google Analytics z stron AMP wymiary i dane niestandardowe za pomocą gtag.js, możesz wykorzystać właściwość extraUrlParams w konfiguracjach wyzwalaczy w <amp-analytics> JSON. Parametry niestandardowe w Google Analytics są wysyłane jako parametry zdarzenia.

W przypadku parametrów zdarzeń o wartości ciągu używaj prefiksu ep..
W przypadku parametrów zdarzeń o wartości liczbowej używaj prefiksu epn..

Przed wysłaniem upewnij się, że te niestandardowe wymiary i dane są zarejestrowane w usłudze w Google Analytics.

Przykład: parametry niestandardowe związane z odsłoną

Ta konfiguracja wysyła wymiar niestandardowy my_custom_dimension i niestandardowy rodzaj danych my_page_score z pierwszym wyświetleniem strony:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "ep.my_custom_dimension": "value1",
        "epn.my_page_score": 95
      }
    }
  }
}
</script>
</amp-analytics>

Przykład: parametry niestandardowe ze zdarzeniem kliknięcia

Ta konfiguracja wysyła parametry niestandardowe, gdy kliknięty zostanie element o identyfikatorze myButton:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackButtonClick": {
      "on": "click",
      "selector": "#myButton",
      "request": "event",
      "vars": {
        "event_name": "button_click",
        "event_category": "Interactive"
      },
      "extraUrlParams": {
        "ep.button_id": "myButton",
        "ep.custom_info": "MoreDetails"
      }
    }
  }
}
</script>
</amp-analytics>

Domeny z linków

Tag łączący domeny umożliwia pomiar co najmniej 2 powiązanych witryn w różnych domenach jako jednej witryny. Aby określić domeny, które mają być połączone, użyj tego kodu:"linker": { "domains": [...] }

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com", "foo.example.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

Możliwość tworzenia linków do domeny kanonicznej z serwera AMP Cache jest domyślnie włączona. Aby wyłączyć możliwość łączenia ruchu w domenie, dodaj "linker": "false" do parametrów config:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Kompletny przykład

Ten przykładowy kod przedstawia kompletną działającą wersję demonstracyjną strony AMP, która tworzy jedną stronę AMP i wysyła zdarzenie button-click do Google Analytics po kliknięciu przycisku. Zastąp <TAG_ID> prawidłowym identyfikatorem tagu:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

Rozwiązywanie problemów

Aby sprawdzić konfigurację tagowania, użyj validator.amp.dev. Możesz też ręcznie zadbać o to, aby wartość cid była spójna w różnych domenach, wykonując te czynności:

Pamiętaj, aby wyczyścić pliki cookie lub użyć trybu incognito.
Jeśli symbol cid nie występuje w pliku cookie Google Analytics, można go też znaleźć na karcie Sieć w przeglądarce internetowej. Wyszukaj collect request, a ładunek powinien zawierać wartość cid.
Po przejściu z sieci CDN Google do witryny klienta wartości cid i gclid powinny być przekazywane za pomocą dekoracji adresu URL:
```
**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
```
Końcowa strona docelowa powinna mieć taką samą wartość cid jak początkowa strona docelowa.
Uważaj na przekierowania i zmiany domeny między stroną kanoniczną a stronami docelowymi innymi niż AMP.

Konfigurowanie tagu AMP Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Instalacja

Tag Google

Instalacja

Aktywatory zdarzeń

Wysyłanie wymiarów i parametrów niestandardowych za pomocą Google Analytics

Przykład: parametry niestandardowe związane z odsłoną

Przykład: parametry niestandardowe ze zdarzeniem kliknięcia

Domeny z linków

Kompletny przykład

Rozwiązywanie problemów

Konfigurowanie tagu AMP