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 ayarlanacağı açıklanmaktadır.

Kurulum

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 Etiket Yöneticisi arayüzünden gelişmiş yapılandırmalar oluşturup üçüncü taraf etiketlerini dağıtmanıza olanak tanır.

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

Google etiketi

gtag.js'nin AMP uygulaması, AMP web sitenizde Analytics'i kullanabilmeniz 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

gtag.js'yi bir AMP sayfasında yapılandırmak için öncelikle sayfadaki <head> etiketi içine 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>

Ardından, Google etiketini AMP sayfanıza, sayfadaki <body> etiketi içinde bir JSON bileşeni olarak ekleyin. <TARGET_ID> değerini, veri göndermek istediğiniz ürünlerin (ör. Google Ads, Google Analytics) etiket kimliği ile değiştirin:

<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 ilgili ürünün etiketinin tamamını yüklemeniz gerekmez. Yalnızca ayrı bir config komutuna hedef kimliğini 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ını inceleyin.

Etkinlik tetikleyicileri

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

Bu örnekte, Google Analytics'e nasıl click etkinliği 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ü belirtir. Bu örnekte etkinlik türü click'dir. vars bölümünde, event_name içinde etkinlik türünü belirtin ve gerektiğinde 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.

Google Analytics ile özel boyutlar ve parametreler gönderme

gtag.js kullanarak AMP sayfalarından Google Analytics'e özel boyutlar ve metrikler göndermek için <amp-analytics> JSON'daki tetikleyici yapılandırmalarınızda extraUrlParams özelliğinden yararlanabilirsiniz. Google Analytics'teki özel parametreler, etkinlik parametresi olarak gönderilir.

  • Dize değerli etkinlik parametreleri için ep. ön ekini kullanın.
  • Sayı değerli etkinlik parametreleri için epn. önekini kullanın.

Göndermeden önce bu özel boyutların ve metriklerin Google Analytics mülkünüze kaydedildiğinden emin olun.

Örnek: Sayfa görüntüleme ile özel parametreler

Bu yapılandırma, ilk sayfa görüntüleme ile birlikte bir özel boyut my_custom_dimension ve bir özel metrik my_page_score gönderir:

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

Örnek: Tıklama etkinliği içeren özel parametreler

Bu yapılandırma, kimliği myButton olan bir öğe tıklandığında özel parametreler gönderir:

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

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

AMP önbelleğinden standart alanınıza 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>

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 tam işlevsel demosu gösterilmektedir. <TAG_ID> öğesini 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 validator.amp.dev adresini kullanın veya aşağıdakileri yaparak 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 bir Google Analytics çerezinde bulunmuyorsa web tarayıcınızın Ağ sekmesinde de görülebilir. collect request araması yapın ve yük, cid değeri içermelidir.

  • Google CDN'sinden istemci web sitesine geçtikten sonra cid ve gclid değeri URL süsleme yoluyla aktarılmalıdır:

    **_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 ile AMP olmayan açılış sayfaları arasındaki yönlendirmelere ve alan değişikliklerine dikkat edin.