Konfigurowanie tagu AMP

Projekt Accelerated Mobile Pages (AMP) to platforma internetowa typu open source, która pomaga zwiększać skuteczność treści internetowych. AMP obejmuje wbudowaną obsługę tagu Google i Menedżera tagów Google. Z tego przewodnika dowiesz się, jak skonfigurować Google Analytics na potrzeby stron AMP.

Instalacja

Tag Google umożliwia instalowanie Google Analytics, Google Ads i innych usług Google na stronach AMP. 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.

Klikaj te przyciski, aby wybrać preferowaną platformę:

Tag Google

Implementacja tagu gtag.js AMP wykorzystuje platformę amp-analytics, która umożliwia dodawanie analiz w witrynie AMP. Dane ze stron AMP można wysyłać do Google Ads, Google Analytics i innych usług Google przy użyciu tej samej implementacji tagu gtag.js.

Instalacja

Aby skonfigurować tag Google (gtag.js) na stronie AMP, najpierw upewnij się, że zawiera on komponent amp-analytics w tagu <head>:

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

Następnie dodaj do swojej strony AMP tag Google jako komponent JSON w tagu <body> na stronie. Zastąp <TARGET_ID> identyfikatorem tagu produktów (np. Google Ads lub 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ć wiele usług w tagu Google, nie musisz instalować całego tagu z danej usługi. Musisz tylko 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ć określone dane do produktów, skonfiguruj reguły na podstawie zdarzeń, np. kliknięć. Reguły tagu gtag.js na stronach AMP mają te same wzorce JSON co inne konfiguracje reguł amp-analytics.

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

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

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

Tag łączący domeny umożliwia pomiar co najmniej 2 powiązanych witryn w osobnych domenach jako jednej. Aby określić domeny, które chcesz połączyć, użyj "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ść dodawania linków do domeny kanonicznej z pamięci podręcznej AMP 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>

Pełny przykład

Ten przykładowy kod przedstawia pełną działającą wersję strony AMP, która tworzy pojedynczą stronę AMP i po kliknięciu przycisku wysyła zdarzenie button-click do Google Analytics. 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

Użyj narzędzia amptagtest.appspot.com, aby sprawdzić konfigurację tagowania. Możesz też ręcznie sprawdzić, czy wartość cid jest taka sama we wszystkich domenach, wykonując te czynności:

  • Usuń pliki cookie lub użyj trybu incognito.
  • Jeśli cid nie zostanie znaleziony w pliku cookie Google Analytics, możesz go też zarejestrować na karcie Sieć w przeglądarce. Wyszukaj collect request, a ładunek powinien zawierać wartość cid.

  • Po przekazaniu z sieci CDN Google do witryny klienta wartości cid i gclid powinny zostać przekazane w deklaracji adresu URL:

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**

  • Ostateczna strona docelowa powinna nadal mieć tę samą wartość cid co na początkowej stronie docelowej.

  • Zachowaj ostrożność w przypadku przekierowań i zmian domeny między stroną kanoniczną a stroną docelową inną niż AMP.