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

AMP için etiket ayarları

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

Kurulum

Google etiketi Google Analytics, Google Ads ve diğer Google ürünlerini AMP sayfalarına yüklemenize olanak sağlar. 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 etiketlerini dağıtma olanağı tanır.

Aşağıdaki düğmelerden yararlanarak platform tercihinizi belirleyin:

Google etiketi

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

Kurulum

Bir AMP sayfasında Google etiketini (gtag.js) yapılandırmak için öncelikle amp-analytics etiketini 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 bir <body> bileşeni olarak ekleyin. <TARGET_ID> kısmını ürünlerin etiket kimliğiyle değiştirin (ör. Google Ads) kullanabilirsiniz:

<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ıklama sayısı 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ını izler.

Bu örnekte, bir 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, etkinlik türünü (bu örnekte click etkinliği) belirtir. vars bölümünde, event_name içinde etkinliğin türünü belirtin ve gerektiği gibi 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 alanınıza AMP önbelleğinden bağlantı verme ö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österir. <TAG_ID> değerini geçerli bir etiket kimliği ile 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'u kullanın veya aşağıdaki işlemleri gerçekleştirerek cid değerinin alanlar arasında tutarlı olduğundan emin olun:

Çerezleri temizlediğinizden veya Gizli mod kullandığınızdan emin olun.
cid etiketi bir Google Analytics çerezinde bulunamazsa, bu parametre web tarayıcınızın Ağ sekmesinde de görülebilir. collect request için arama yaptığınızda yük cid değeri içermelidir.
Google CDN'den istemci web sitesine geçiş yaptıktan sonra cid ve gclid değeri, URL süsleme aracılığıyla geçirilmelidir:
```
**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
```
Nihai açılış sayfası ilk açılış sayfasındakiyle aynı cid değerine sahip olmalıdır.
Standart sayfa ve AMP olmayan açılış sayfaları arasındaki yönlendirmeler ve alan değişikliklerine dikkat edin.