Konfigurowanie tagu AMP

Projekt przyspieszonych stron mobilnych (Accelerated Mobile Pages, AMP) to platforma internetowa typu open source , która pomaga poprawić wydajność 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 stronach 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 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 platformy amp-analytics, która umożliwia instrumentowanie analizy 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ć tag gtag.js na stronie AMP, najpierw upewnij się, że komponent amp-analytics został umieszczony w tagu <head> na stronie:

<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ć wiele usług w tagu Google, nie musisz instalować całego tagu z tej usługi. Wystarczy, że dodasz identyfikator miejsca docelowego do osobnego config polecenia.

<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 usług, skonfiguruj reguły 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, w tym przypadku jest to zdarzenie click. W sekcji vars określ typ zdarzenia w event_name i dodaj dodatkowe parametry w razie potrzeby.

"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 do Google Analytics

Aby wysyłać wymiary i dane niestandardowe do Google Analytics ze stron AMP za pomocą gtag.js, możesz użyć właściwości extraUrlParams w konfiguracjach reguł w pliku JSON <amp-analytics>. Parametry niestandardowe w Google Analytics są wysyłane jako parametry zdarzeń.

  • W przypadku parametrów zdarzeń o wartościach tekstowych użyj prefiksu ep..
  • W przypadku parametrów zdarzeń o wartościach liczbowych użyj prefiksu epn..

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

Przykład: parametry niestandardowe z wyświetleniem strony

Ta konfiguracja wysyła wymiar niestandardowy my_custom_dimension i dane niestandardowe my_page_score z początkowym 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 po kliknięciu elementu 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>

Tag łączący domeny umożliwia pomiar 2 lub więcej powiązanych witryn w osobnych domenach jako jednej. Aby określić domeny, które mają być połączone, użyj 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ść łączenia z domeną kanoniczną 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>

Kompletny przykład

Ten przykład kodu 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 ciąg <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 sprawdzić, czy wartość cid jest spójna w różnych domenach, wykonując te czynności:

  • Wyczyść pliki cookie lub użyj trybu incognito.
  • Jeśli nie można znaleźć parametru cid w pliku cookie Google Analytics, można go też sprawdzić na karcie Sieć w przeglądarce. Wyszukaj collect request, a ładunek powinien zawierać wartość cid.

  • Po przejściu z sieci CDN Google do witryny klienta wartość 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.