Özel şablonlar hızlı başlangıç kılavuzu

Özel şablonlar kendi etiketinizi ve değişken tanımlarınızı yazmanıza olanak tanır. Böylece kuruluşunuzdaki diğer kullanıcılar, yerleşik etiket ve değişken şablonlarıyla birlikte bu etiketleri kullanabilir. Özel şablonların izin odaklı ve korumalı yapısı, özel etiketler ve değişkenlerin özel HTML etiketleri ve özel JavaScript değişkenleri kullanımına göre daha güvenli ve verimli bir şekilde yazılmasını mümkün kılar.

Özel etiket ve değişken şablonları Google Etiket Yöneticisi'nin Şablonlar bölümünde tanımlanır. Şablonlar ana ekranı, kapsayıcınızda önceden tanımlanmış tüm etiket veya değişken şablonlarını listeler. Bu ekrandan yeni şablonlar da oluşturabilirsiniz.

Bir şablonu dışa aktarıp kuruluşunuzdaki diğer kişilerle paylaşabilir ve Topluluk Şablon Galerisi'nde daha geniş kapsamlı dağıtım için şablonlar geliştirilebilir.

Şablon Düzenleyici

Şablon Düzenleyici, özel şablonlar oluşturmanızı, önizlemenizi ve test etmenizi sağlar. Etiket şablonunuzu tanımlamanıza yardımcı olması için giriş yapabileceğiniz dört temel alan vardır:

  • Bilgi - Şablonun etiket veya değişken adı ve simgesi gibi temel özelliklerini tanımlayın.
  • Alanlar: Bu, etiket şablonunuza giriş alanları eklemek için kullanılan görsel bir düzenleyicidir.
  • Kod - Etiketinizin veya değişkeninizin nasıl davranması gerektiğini tanımlamak için korumalı alana alınmış JavaScript girin.
  • İzinler: Etiketinizin veya değişkeninizin yetkilerini görüntüleyin ve sınırlayın.

İlk özel etiket şablonunuzu oluşturma

Bu örnek, temel bir örnek piksel etiketinin nasıl oluşturulacağı konusunda size yol gösterecektir. Bu etiket bir web sayfasında tetiklendiğinde, etiket sağlayıcısının sunucularına doğru hesap bilgilerini içeren bir isabet gönderir.

1. İlk şablonunuzu başlatmak için sol gezinme menüsündeki Şablonlar'ı ve Etiket Şablonları bölümünün altındaki Yeni düğmesini tıklayın.

2. Bilgi'yi tıklayın ve etiketin Ad (zorunlu), Açıklama ve Simge özelliklerini tanımlayın.

Ad, bu etiketi Etiket Yöneticisi kullanıcı arayüzünde uygulamak için giden kullanıcılara sunulacak olan addır.

Açıklama, adından da anlaşılacağı üzere bu etiketin işlevini açıklayan kısa (200 karakter veya daha kısa) bir açıklamadır.

Simge, etiket, simge özelliğini destekleyen listelerde görüntülendiğinde görünecek bir resim seçebilmenizi sağlar. Simge resimleri, 50 kB'tan büyük ve en az 64 x 64 piksel ölçüsünde, kare PNG, JPEG veya GIF dosyalarından oluşmalıdır.

3. Şablonunuzu önizlemek için Yenile'yi tıklayın.

Alan girişlerinin sağında bir Şablon Önizleme penceresi bulunur. Düzenleyicide her değişiklik yapıldığında Yenile düğmesi görünür. Yaptığınız değişikliklerin etiketinizin görünümünde ne yaptığını görmek için Yenile'yi tıklayın.

4. Etiket şablonunuza alan eklemek için Alanlar'ı tıklayın.

Şablon Düzenleyici'nin Alanlar sekmesi, etiket şablonunda alanlar oluşturmanızı ve düzenlemenizi sağlar. Alanlar, hesap kimliği gibi özel veriler girmek için kullanılır. Metin alanları, açılır menüler, radyo düğmeleri ve onay kutuları gibi standart form öğeleri ekleyebilirsiniz.

5. Alan Ekle'yi tıklayın ve Metin girişi'ni seçin. Varsayılan adı (ör. "text1") "accountId" ile değiştirin. Şablon Önizlemesi'nde Yenile'yi tıklayın.

Bu alanın yanında, tanıdık bir değişken seçici (değişken seçici simgesi) simgesi yer alır. Bu şablonun kullanıcıları, kapsayıcıda etkin olan değişkenleri seçmek için değişken seçici simgesini tıklayabilir.

Sonraki adım, alana bir etiket eklemektir:

6. Bu alanla ilgili diğer seçenekleri açmak için metin alanının yanındaki genişlet simgesini (genişlet simgesi) tıklayın. Görünen ad alanına "Account ID" ifadesini girin. Şablon Önizleme'de Yenile'yi tıklayın.

Alanın üzerinde "Hesap Kimliği" başlıklı bir metin etiketi görünür.

7. Kod sekmesini tıklayın ve düzenleyiciye korumalı alana sahip JavaScript'i girin:

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

Kodun ilk satırı (const sendPixel = require('sendPixel')), sendPixel API'yi içe aktarır.

İkinci kod satırı (const encodeUriComponent = require('encodeUriComponent')), encodeUriComponent API'yi içe aktarır.

Bir sonraki satır olan const account = data.accountId;, 5. adımda oluşturulan accountId değerini alır ve account adlı sabit bir değerde depolar.

3. kod satırı (const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);), analiz verilerini ve etiketin yapılandırıldığı kodlanmış hesap kimliğini günlüğe kaydeden sabit bir URL uç noktasını birleştiren bir url sabiti oluşturur.

Son satır olan sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), gerekli parametrelerle sendPixel() işlevini çalıştırır ve belirtilen URL'ye bir istek gönderir. data.gtmOnSuccess ve data.gtmOnFailure değerleri, etiketin görevi tamamladığında veya başarısız olduğunda Google Etiket Yöneticisi'ne bilgi verir ve ardından Google Etiket Yöneticisi tarafından etiket dizilimi veya önizleme modu gibi özellikler için kullanılır.

8. İlerleme durumunuzu kaydetmek için Kaydet'i tıklayın. Bu işlem, algılanan tüm izinleri Şablon Düzenleyici'ye yükler.

Bazı Şablon API'lerinin, ne yapacaklarını veya yapamayacaklarını belirten, kendileriyle ilişkilendirilmiş izinleri vardır. Kodunuzda sendPixel gibi bir şablon API'si kullandığınızda, Etiket Yöneticisi İzinler sekmesinde ilgili izinleri gösterir.

9. sendPixel uygulamasının veri gönderebileceği alanları hassaslaştırmak için İzinler'i tıklayın. Pikselleri Gönder girişi için genişlet simgesini (genişlet simgesi) tıklayın ve İzin Verilen URL Eşleştirme Kalıpları alanına https://endpoint.example.com/ girin.

Bir etiket şablonu veri göndermek üzere yapılandırıldığında, verilerin gönderilebileceği yeri kısıtlamak için ilişkili izin altında bir İzin Verilen URL Eşleşme Kalıbı belirtmeniz gerekir. Kodunuzda belirtilen URL, izin verilen bir URL eşleşme kalıbıyla eşleşmiyorsa sendPixel çağrısı başarısız olur.

URL eşleşme kalıbında HTTPS kullanılması ve hem ana makinenin hem de yol kalıplarının belirtilmesi gerekir. Ana makine bir alan adı (ör. "https://example.com/") veya belirli bir alt alan adı (ör. "https://sub.example.com/") olabilirhttps://example.com//*https://\*.example.com/test/\*.example.com/www.example.comshop.example.comblog.example.com\*https://example.com/\*

Ayrı satırlarda ek URL eşleşme kalıpları belirtin.

10. Run Code'u (Kodu Çalıştır) tıklayın ve herhangi bir sorun için Console (Konsol) penceresine bakın.

Algılanan tüm hatalar Konsol penceresinde görünür.

11. Kaydet'i tıklayın ve Şablon Düzenleyici'yi kapatın.

Etiket şablonu artık kullanıma hazır olmalıdır.

Yeni etiketinizi kullanma

Yeni tanımlanmış özel etiket şablonunuzu kullanan yeni bir etiket oluşturma işlemi diğer etiketlerde olduğu gibidir:

  1. Google Etiket Yöneticisi'nde Etiketler > Yeni'yi tıklayın.
  2. Yeni etiketiniz, Yeni Etiket penceresinin Özel bölümünde görünür. Etiket şablonunu açmak için bu düğmeyi tıklayın.
  3. Etiket şablonu yapılandırması için gerekli alanları doldurun.
  4. Tetikleyici'yi tıklayın ve etiketin ne zaman etkinleşeceği için uygun bir tetikleyici seçin.
  5. Etiketi kaydedin ve kapsayıcınızı yayınlayın.

İlk özelleştirilebilen değişken şablonunuzu oluşturma

Özel değişken şablonları, etiket şablonlarına benzerdir ancak dikkat çekici birkaç fark vardır:

  • Özelleştirilebilen değişken şablonları bir değer döndürmelidir.

    Değişkenler, işlemin tamamlandığını belirtmek için data['gtmOnSuccess'] yöntemini çağırmak yerine doğrudan bir değer döndürür.

  • Özelleştirilebilen değişken şablonları, Etiket Yöneticisi kullanıcı arayüzünün farklı bölümlerinde kullanılır.

  • Özel değişkeninizi temel alan yeni bir değişken oluşturmak için Etiketler > Yeni yerine Değişkenler > Yeni bölümüne gidin.

Özelleştirilebilen değişken şablonu oluşturmayla ilgili tam kapsamlı kılavuz için özelleştirilebilen değişken oluşturma bölümüne bakın.

Dışa ve içe aktarma

Bir özel şablonu kuruluşunuzla paylaşmak için özel şablonu dışa aktarabilir ve diğer Etiket Yöneticisi kapsayıcılarına aktarabilirsiniz. Bir şablonu dışa aktarmak için:

  1. Etiket Yöneticisi'nde Şablonlar'ı tıklayın.
  2. Listeden dışa aktarmak istediğiniz şablonun adını tıklayın. Şablon, Şablon Düzenleyici'de açılır.
  3. Diğer İşlemler menüsünü () tıklayın ve Dışa Aktar'ı seçin.

Bir şablonu içe aktarmak için:

  1. Etiket Yöneticisi'nde Şablonlar'ı tıklayın.
  2. Yeni'yi tıklayın. Bu işlem, Şablon Düzenleyici'de boş bir şablon açar.
  3. Diğer İşlemler menüsünü () tıklayın ve İçe Aktar'ı seçin.
  4. İçe aktarmak istediğiniz .tpl dosyasını seçin.