AMP için etiket ayarları

Accelerated Mobile Pages (AMP) projesi, açık kaynak bir web web içeriğinizin performansını artırmanıza yardımcı olur. AMP, Google etiketi ve Google Etiket Yöneticisi için yerleşik destek içerir. Bu kılavuzda ele alınan konular: AMP sayfaları için Google Analytics'i nasıl kuracağınızı anlatacağız.

Kurulum

Google etiketi, Google Analytics, Google Ads ve diğer site AMP sayfalarındaki Google ürünleri. Google Etiket Yöneticisi, bir AMP kapsayıcısı oluşturur ve gelişmiş yapılandırmalar oluşturmanıza ve üçüncü taraf etiketlerini kullanabilirsiniz.

Aşağıdaki düğmelerden platform tercihinizi seçin:

Google etiketi

gtag.js'nin AMP uygulaması, şu amaçlarla amp-analytics çerçevesini kullanır: size AMP web sitenizde analiz araçları sunar. Veriler, AMP sayfalarından Google Ads, Google Analytics ve diğer Google ürünlerine gönderilir aynı gtag.js uygulamasından değiştirebilir.

Kurulum

Bir AMP sayfasında gtag.js'yi yapılandırmak için öncelikle amp-analytics bileşenini sayfadaki <head> etiketine ekledi:

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

Daha sonra, Google etiketini AMP sayfanıza Sayfada <body> etiketi bulunuyor. <TARGET_ID> değerini şununla değiştirin: etiket kimliği (ör. Google Ads, Google Analytics) geçişini veri göndermek için:

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

Google etiketinde birden fazla ürünü yapılandırmak için o üründeki etiketin tamamı kullanılabilir. Bir kampanyaya yalnızca hedef kimliği eklemeniz gerekir: ayrı config komutu yazın.

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

Daha fazla bilgi için amp-analytics belgelerini inceleyin.

Etkinlik tetikleyicileri

Ürünlerinize belirli veriler göndermek için etkinliklere dayalı tetikleyiciler yapılandırın örneğin tıklamalar gibi. AMP'de gtag.js tetikleyicileri diğer amp-analytics tetikleyici yapılandırmaları.

Bu örnekte, bir click etkinliğinin Google Analytics'e nasıl gönderileceği gösterilmektedir. İlgili içeriği oluşturmak için kullanılan selector değeri, CSS seçici sayesinde ilgili öğenin emin olabilirsiniz. on değeri, etkinliğin türünü belirtir. Bu örnekte click etkinliği. vars bölümünde, etkinlik türünü şurada belirtin: event_name ve gerektiğinde başka parametreler ekleyin.

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

Önerilen etkinliklere ek olarak kendi özel etkinliklerinizi de belirtebilirsiniz.

Alan adı bağlayıcı, ayrı alan adlarındaki iki veya daha fazla ilgili sitenin ölçülmüştür. Bağlanması gereken alanları belirtmek için şunu kullanın: "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>

AMP önbelleğinden standart alan adınıza bağlantı oluşturma özelliği etkinleştirildi varsayılan olarak. Alan trafiği bağlama özelliğini devre dışı bırakmak için config parametrelerine "linker": "false" ekleyin:

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

Tam örnek

Bu kod örneğinde, Google Etiket Yöneticisi'ni kullanarak tek bir AMP sayfası oluşturur ve Google'a bir button-click etkinliği gönderir Analytics'i seçin. <TAG_ID> öğesini geçerli bir etiket kimliği:

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

Sorun giderme

Etiketleme ayarlarınızı doğrulamak için amptagtest.appspot.com adresini kullanabilir veya manuel olarak yapabilirsiniz. şunu yaparak cid değerinin alanlar arasında tutarlı olduğundan emin olun: takip etmek için:

  • Çerezleri temizlediğinizden veya Gizli modu kullandığınızdan emin olun.
  • Bir Google Analytics çerezinde cid bulunamazsa da Ağ sekmesinde görebilirsiniz. collect request için arama yap, Yükün bir cid değeri içermesi gerekir.

  • Google CDN'den müşterinin web sitesine geçtikten sonra, cid ve gclid değeri URL dekorasyonu aracılığıyla iletilmelidir:

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

  • Nihai açılış sayfası yine decid ilk açılış sayfasıdır.

  • Standart sayfa arasındaki yönlendirmeler ve alan adı değişiklikleri konusunda dikkatli olun ve AMP olmayan açılış sayfalarında kullanabilirsiniz.