AMP için etiket ayarları

Accelerated Mobile Pages (AMP) projesi, web içeriğinizin performansını artırmaya 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 ayarlanacağı 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ğı sunar.

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

Google etiketi

gtag.js'nin AMP uygulaması, AMP web sitenizde analizleri kullanmanıza olanak tanımak için amp-analytics çerçevesini kullanır. Veriler, aynı gtag.js uygulamasından Google Ads, Google Analytics ve diğer Google ürünlerine AMP sayfalarından gönderilebilir.

Döşeme

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

<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, sayfadaki <body> etiketi içinde bir JSON bileşeni olarak ekleyin. <TARGET_ID> kısmını ürünlerin etiket kimliğiyle değiştirin (ör. Google Ads, Google Analytics) seçebilirsiniz:

<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 çok ürünü yapılandırmak için ilgili üründeki etiketin tamamını yüklemeniz gerekmez. destination ID'yi 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 bakın.

Etkinlik tetikleyicileri

Ürünlerinize belirli veriler göndermek için tıklama sayısı gibi etkinliklere dayalı tetikleyiciler yapılandırın. AMP'deki gtag.js tetikleyicileri, diğer amp-analytics tetikleyici yapılandırmalarıyla 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 hedefleneceğini belirtmenize olanak tanıyan bir CSS seçicidir. on değeri, etkinliğin türünü (bu örnekte click etkinliği) belirtir. vars bölümünde, event_name bölümünde etkinlik türünü belirtin ve gerektiği şekilde 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.

Alan adı bağlayıcı, ayrı alan adlarındaki iki veya daha fazla ilgili sitenin tek olarak ölçülmesini sağlar. Bağlanması gereken alanları belirtmek için "linker": { "domains": [...] } ifadesini 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ı oluşturma ö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>

Eksiksiz örnek

Bu kod örneğinde, tek bir AMP sayfası oluşturan ve düğme tıklandığında Google Analytics'e button-click etkinliği gönderen bir AMP sayfasının eksiksiz bir demosu gösterilmektedir. <TAG_ID> kısmını 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ğıdaki adımları uygulayarak cid değerinin alanlar arasında tutarlı olduğundan manuel olarak emin olabilirsiniz:

  • Çerezleri temizlediğinizden veya Gizli modu kullandığınızdan emin olun.
  • cid, Google Analytics çerezinde bulunamazsa web tarayıcınızın Ağ sekmesinde de görülebilir. collect request araması yaparsanız yük bir cid değeri içermelidir.

  • Google CDN'den istemci web sitesine geçirildikten sonra cid ve gclid değeri, URL süslemesi aracılığıyla iletilmelidir:

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

  • Nihai açılış sayfası, ilk açılış sayfasındaki cid değerine sahip olmalıdır.

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