Destekle iletişim

E-postayla, genellikle iki gün içinde yanıt veririz.

Google reCAPTCHA, kötüye kullanıma karşı bu gönderimi denetler; bu sırada veriler Google'a aktarılır. Komut dosyası yalnızca bu form açıldığında yüklenir.

← Tüm yazılar

Google Tag Manager ile Stats4U sayacı ekleme

· Lukas Wojcik

Bu konuda blogda 2015'ten kalma bir rehber var. Ekran görüntüleri artık bu şekilde görünmeyen bir Tag Manager'ı gösteriyor ve yedi adımından biri – document.write kutusunu işaretlemek – artık hiç gerekmiyor. Bu yazı onun yerini alıyor.

Ayrıca eski rehberin vazgeçtiği soruyu da yanıtlıyor. O rehber, sayaç görselinin konumu kontrol edilemediği gerekçesiyle Tag Manager ile görünmez sayacı öneriyordu. Kontrol edilebilir. Nasıl yapılacağı bu sayfanın sonunda.

Kısa sürüm

Tag Manager'da: Etiketler → Yeni → Özel HTML, ardından HTML alanına tek bir satır yapıştırın:

20157 — adımbugün3 — alan ve bir tetikleyicidocument.write adımı kalktı — betik artık onu kullanmıyor 
<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

Tetikleyici: Tüm Sayfalar; ardından kapsayıcıyı kaydedin ve yayınlayın. data-id özelliğine sayaç numarası yazılır; bu numara istatistik sayfasında yer alır.

Bütün iş bu kadar – 2015'te yedi adım gerekirken bugün üç alan ve bir tetikleyici. Hiçbir yerde document.write kutusunu işaretlemeniz gerekmez, çünkü betik artık onu kullanmıyor.

Bu aslında ne yapıyor ve neden doğru seçim olmayabilir

Betik sayacı sayfada kendisinin hemen arkasına yerleştirir. Elle yazılmış HTML'ye doğrudan yapıştırıldığında bu tam olarak doğrudur: sayaç, kodun bulunduğu yerde görünür.

Tag Manager üzerinden durum farklıdır, çünkü yerleşim artık serbest bir seçim değildir. Kararı kapsayıcı verir; o da genellikle belgenin head bölümünde ya da kapsayıcı kodu nereye kurulduysa oradadır. Dolayısıyla sayaç oraya eklenir – alt bilgiye değil, kenar çubuğuna değil, Tag Manager etiketi nereye yerleştirdiyse oraya.

Bir görünmez sayaç için bunun hiçbir önemi yoktur; eski rehber de bu yüzden onu öneriyordu. 980 numaralı tasarım hiçbir şey göstermez, 981 numaralı tasarım ise yalnızca istatistik sayfasına bağlantı veren küçük bir simge gösterir. Bu durumda yukarıdaki kısa sürüm eksiksizdir ve bu yazının geri kalanı isteğe bağlıdır.

Görünür bir sayacı belirli bir yere yerleştirmek biraz daha fazla iş ister.

Sayacın nerede görüneceğini belirlemek

Betiğin, eski rehberin hiç değinmediği ikinci bir modu var. Bu mod, data-id özelliği yerine bir liste alır ve yer tutucu öğeleri id değerlerine göre arar.

Birinci adım – sayfada bir yer tutucu, sayacın olması gereken yerde. Bu, Tag Manager'a değil, doğrudan site şablonunun kendisine eklenir, çünkü bu karardan uzak tutmaya çalıştığımız şey tam da Tag Manager:

<div id="s4u_cp0"></div>

İkinci adım – Tag Manager'da şu kod, tek satırlık kodun yerini alır. Etiket türü yine Özel HTML:

<script>
(function () {
  // No placeholder on this page? Then no counter, and no request either.
  if (!document.getElementById('s4u_cp0')) { return; }

  window.s4uid         = ['YOUR-ID'];
  window.s4u_paramsarr = [{ s4ustyleid: '100' }];

  var s = document.createElement('script');
  s.src = 'https://www.stats4u.net/s4u.js';
  document.head.appendChild(s);
})();
</script>

Üçüncü adım – tetikleyiciyi değiştirin. İnsanların takıldığı kısım burası. Tüm Sayfalar tetikleyicisi, Tag Manager'ın becerebildiği en erken anda tetiklenir; bu da çoğu zaman yer tutucu belgede henüz yokken olur. Burada doğru olan, yerleşik DOM Hazır tetikleyicisidir. Sayaç div'den önce değil, sonra gelmelidir.

Sayaç artık o div'in içinde görünür, başka hiçbir yerde değil.

Hangi sayfalarda görüneceğini belirlemek

Burada birbirinden bağımsız iki kaldıraç var ve ikisini ayrı ayrı anlamaya değer.

Bunlardan biri yer tutucudur. İşi fonksiyonun içindeki ilk satır yapar: sayfada s4u_cp0 yoksa durur ve betik hiç indirilmez bile. Yani div'i içeren bir şablon sayaç alır, içermeyen almaz – bu, Tag Manager'da hiçbir değişiklik ve yayınlama adımı olmadan, doğrudan site şablonlarında belirlenir.

Diğeri tetikleyicidir. Aynı karar bunun yerine Tag Manager'da da verilebilir: tetikleyiciye bir koşul eklenir, böylece tetikleyici DOM Hazır anında yalnızca Page Path eşleştiğinde tetiklenir. Tetikleyici URL'lerle ilgili kurallara, yer tutucu ise şablonlarla ilgili kurallara uygundur.

Bir sayfada birden fazla sayaç

Liste gerektiği kadar sayaç alır. Listedeki sıra, yer tutucunun id değerindeki numaradır:

window.s4uid         = ['ID-ONE', 'ID-TWO'];
window.s4u_paramsarr = [{ s4ustyleid: '981' }, { s4ustyleid: '100' }];

Birincinin yeri s4u_cp0, ikincininki s4u_cp1. İkisi de bu yazı yazılırken bir tarayıcıda kontrol edildi: birincisi 20 × 20 boyutunda bir simge, ikincisi 162 × 25 boyutunda bir şerit olarak çizildi; her biri kendi yer tutucusunun içinde ve sayfanın başka hiçbir yerinde değil.

Sorun çıkarabilecek dört şey

  • İki yöntem bir arada kullanılmaz. Hem data-id özelliği olan hem de listeyi tanımlayan bir etiket iki sayaç üretir ve iki hit ayrı ayrı sayılır.
  • Liste her zaman s4ustyleid ister. Etiketteki data-style özelliği yoksa sessizce 30 numaralı tasarıma geçer. Liste sürümünde böyle bir yedek yoktur ve boş bir tasarım ister.
  • Eksik yer tutucu sessizce başarısız olur. Sayaç yok, hata yok, konsolda hiçbir şey yok. Hiçbir şey görünmüyorsa ilk şüpheli id değeridir – s4u_cp0, O harfiyle değil, sıfırla.
  • Görünmez sayaçta bilerek bağlantı yoktur. 980 numaralı tasarım bağlantısız çizilir, çünkü başkasının sayfasındaki şeffaf, bir piksellik bir tıklama hedefi bir özellik değil, bir tuzaktır. Bağlantı istiyorsanız bunu küçük simgesiyle 981 numaralı tasarım yapar.

Çalıştığını kontrol etmek

Tag Manager'ın Önizleme modu, sayfayı kapsayıcı etkin hâldeyken yükler. Etiket, DOM Hazır etkinliği için tetiklenen etiketler arasında görünmelidir. Ardından istatistik sayfası bunu doğrular – Önizleme üzerinden yapılan bir ziyaret de diğerleri gibi sayılır, bu yüzden sayı birkaç saniye içinde değişmelidir.

Etiket tetikleniyor ama hiçbir şey görünmüyorsa sorun, olasılık sırasıyla, ya yer tutucuda ya da tetikleyicidedir.

Reklam