Bu sayfa, Cloud Translation API ile çevrilmiştir.

AMP için etiket ayarları

Accelerated Mobile Pages (AMP) projesi, web içeriğinizin performansını artırmanıza yardımcı olan açık kaynaklı bir web platformudur. AMP, Google etiketi ve Google Etiket Yöneticisi için yerleşik destek içerir. Bu kılavuzda AMP sayfaları için Google Analytics'in nasıl oluşturulacağı açıklanmaktadır.

Döşeme

Google etiketi, Google Analytics, Google Ads ve diğer Google ürünlerini AMP sayfalarına yüklemenize olanak tanır. Google Etiket Yöneticisi bir AMP kapsayıcısı oluşturur ve size, Etiket Yöneticisi arayüzünden gelişmiş yapılandırmalar oluşturma ve üçüncü taraf etiketleri dağıtma olanağı sağlar.

Aşağıdaki düğmeleri kullanarak platform tercihinizi belirleyin:

Google etiketi

gtag.js'nin AMP uygulaması, size AMP web sitenizde analiz enstrümantasyonu sağlamak için amp-analytics çerçevesini kullanır. Veriler aynı AMP sayfasından Google Ads, Google Analytics ve diğer Google ürünlerine aynı gtag.js uygulamasından gönderilebilir.

Döşeme

Bir AMP sayfasında Google etiketini (gtag.js) yapılandırmak için öncelikle amp-analytics bileşenini sayfadaki <head> etiketine eklediğinizden emin olun:

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

Ardından, Google etiketini AMP sayfanıza, sayfadaki <body> etiketinin bir JSON bileşeni olarak ekleyin. <TARGET_ID> yerine ürünlerin etiket kimliğini girin (ör. Google Ads) hedefleyebilirsiniz:

<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 bu üründeki etiketin tamamını yüklemeniz gerekmez. Hedef kimliğini yalnızca ayrı bir config komutuna eklemeniz gerekir.

<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 dokümanlarına göz atın.

Etkinlik tetikleyicileri

Ürünlerinize belirli veriler göndermek için tıklamalar gibi etkinliklere dayalı tetikleyiciler yapılandırın. AMP'de gtag.js için tetikleyiciler, diğer amp-analytics tetikleyici yapılandırmaları ile aynı JSON kalıplarına uyar.

Bu örnekte, click etkinliğinin Google Analytics'e nasıl gönderileceği gösterilmektedir. selector değeri, hangi öğenin hedeflendiğini belirtmenizi sağlayan bir CSS seçicidir. on değeri, etkinliğin türünü belirtir. Bu, click etkinliğidir. vars bölümünde, etkinlik türünü event_name bölümünde belirtin ve gerekirse ek parametreler ekleyin.

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

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

Bağlantı alanları

Alan bağlayıcı, ayrı alanlardaki iki veya daha fazla alakalı sitenin tek olarak ölçülmesini sağlar. Bağlanması gereken alanları belirtmek için "linker": { "domains": [...] } özelliğini kullanın:

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

Standart önbellekten AMP önbelleğine bağlanma özelliği varsayılan olarak etkindir. Alan trafiğini 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ği, tek bir AMP sayfası oluşturan ve düğme tıklandığında Google Analytics'e bir button-click etkinliği gönderen bir AMP sayfasının tam çalışma demosunu göstermektedir. <TAG_ID> değerini geçerli bir etiket kimliğiyle değiştirin:

<!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 kullanın veya aşağıdakileri yaparak manuel olarak cid değerinin alanlar arasında tutarlı olduğundan emin olun:

Çerezleri temizlediğinizden veya Gizli modu kullandığınızdan emin olun.
cid bir Google Analytics çerezinde bulunmazsa web tarayıcınızın Ağ sekmesinde de gözlemlenebilir. collect request için arama yaptığınızda yük cid değeri içermelidir.

Google CDN'den istemci web sitesine geçtikten sonra cid ve gclid değeri, URL süsleme yoluyla iletilmelidir:

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

Nihai açılış sayfası, ilk açılış sayfasıyla aynı cid değerine sahip olmalıdır.
Standart sayfa ile AMP olmayan açılış sayfaları arasındaki yönlendirmelere ve alan değişikliklerine dikkat edin.