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

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Özel şablonlar kendi etiketinizi ve değişken tanımlarınızı yazmanıza olanak tanır. Böylece kuruluşunuzdaki diğer kişiler bunları yerleşik etiket ve değişken şablonlarıyla birlikte kullanabilir. Özel şablonların izin odaklı ve korumalı yapısı, özel etiket ve değişken yazmanın özel HTML etiketleri ve özel JavaScript değişkenleri kullanmaktan daha güvenli ve verimli olmasını sağlar.

Özel etiket ve değişken şablonları Google Etiket Yöneticisi'nin Şablonlar bölümünde tanımlanır. Şablonlar ana ekranında, kapsayıcınızda zaten tanımlanmış olan tüm etiket veya değişken şablonları listelenir. Ayrıca bu ekrandan yeni şablonlar oluşturabilirsiniz.

Bir şablonu dışa aktarabilir ve kuruluşunuzdaki diğer kişilerle paylaşabilirsiniz. Ayrıca, şablonlar Topluluk Şablon Galerisi'nde daha geniş bir dağıtım için 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ı olmak üzere giriş için dört birincil alan vardır:

  • Bilgi: Şablonun etiket özellikleri, değişken adı ve simgesi gibi temel özelliklerini tanımlayın.
  • Alanlar: Etiket şablonunuza giriş alanları eklemek için kullanılan bir görsel düzenleyicidir.
  • Kod: Etiketinizin veya değişkeninizin nasıl davranması gerektiğini tanımlamak için korumalı alana sahip bir JavaScript girin.
  • İzinler: Etiketinizin veya değişkeninizin neye izin verdiğine dair sınırlar görüntüleyin ve ayarlayın.

İlk özel etiket şablonunuzu oluşturma

Bu örnekte, temel bir örnek piksel etiketinin nasıl oluşturulacağı adım adım açıklanmıştır. Bu etiket bir web sayfasında tetiklendiğinde, etiket sağlayıcının sunucularına doğru hesap bilgileriyle bir isabet gönderir.

1. İlk şablonunuza başlamak için sol gezinme bölmesindeki Şablonlar'ı ve Etiket Şablonları bölümünün altındaki Yeni düğmesini tıklayın.

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

Ad, kullanıcılara bu etiketi Etiket Yöneticisi kullanıcı arayüzü üzerinden uygulamaya çalıştıklarında gösterilecek.

Açıklama, bu etiketin ne işe yaradığının kısa (200 veya daha az karakter) açıklamasıdır.

Simge, etiket simge özelliğini destekleyen listelerde görüntülendiğinde görünecek bir resim seçmenize olanak tanır. Simge resimleri, 50 KB'tan büyük ve en az 64 piksele 64 piksel boyutunda kare PNG, JPEG veya GIF dosyaları olmalıdır.

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

Alan girişlerinin sağında bir Şablon Önizlemesi penceresi bulunur. Düzenleyicide her değişiklik yapıldığında Yenile düğmesi görünür. Değişikliklerinizin, etiketinizin görünümünde ne işe yaradığı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şturup düzenlemenize olanak tanır. Alanlar, hesap kimliği gibi özel verileri 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.

Alanın yanında tanıdık değişken seçici (değişken seçici simgesi) simgesi bulunur. Bu şablonun kullanıcıları, bu 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 alan için diğer seçenekleri açmak üzere metin alanının yanındaki genişlet simgesini (genişlet simgesi) tıklayın. Görünen ad alanına "Hesap Kimliği" girin. Şablon Önizlemesi'nde Yenile'yi tıklayın.

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

7. Kod sekmesini tıklayın ve düzenleyiciye korumalı alana alınmış 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);

İlk kod 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 bunu account adlı bir sabit değerde depolar.

Kodun 3. satırı olan 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 sabit değeri 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 istek gönderir. data.gtmOnSuccess ve data.gtmOnFailure değerleri, etiket görevini tamamladığında veya başarısız olduğunda Google Etiket Yöneticisi'ne bildirir. Ardından Google Etiket Yöneticisi, etiket dizilimi veya önizleme modu gibi özellikler için kullanılır.

8. İlerlemenizi kaydetmek için Kaydet'i tıklayın. Algılanan izinler Şablon Düzenleyici'ye yüklenir.

Bazı Şablon API'leriyle, ne yapabileceklerini veya ne yapmayacaklarını belirleyen izinler vardır. Kodunuzda sendPixel gibi bir şablon API'sini kullandığınızda, Etiket Yöneticisi İzinler sekmesinde ilgili izinleri gösterir.

9. sendPixel adlı kuruluşun veri göndermesine izin verilen alan adlarını 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şme Kalıpları bölümüne https://endpoint.example.com/ yazın.

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

URL eşleşme kalıbı HTTPS kullanmalı ve hem ana makine hem de yol kalıplarını belirtmelidir. Ana makine, bir alan adı (ör. "https://example.com/") veya belirli bir alt alan adı (ör. "https://sub.example.com/") olabilir. Yol, en az bir "/" işaretinden oluşmalıdır. Alt alan adını veya herhangi bir uzunluk (ör. "https://\*.example.com/test/") yolunu belirtmek için joker karakter olarak yıldız işareti (*) kullanın. Yıldız işareti, olası tüm kalıpları yakalayacak bir joker karakterdir (ör. blog.example.com olarak)

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

10. Kodu Çalıştır'ı tıklayın ve herhangi bir sorun olup olmadığını görmek için Konsol penceresine bakın.

Tespit edilen 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 kullanın

Yeni tanımlanan özel etiket şablonunuzu kullanan yeni bir etiket oluşturma işlemi, diğer etiketlerle aynıdır:

  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 tıklayın.
  3. Etiket şablonu yapılandırması için gerekli alanları doldurun.
  4. Tetikleme'yi tıklayın, etiketin ne zaman tetikleneceğini belirleyen 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

Özelleştirilebilen değişken şablonları, önemli farklılıklar dışında etiket şablonlarına benzer:

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

    Değişkenler, tamamlanma durumunu 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.

  • Özelleştirilebilen değişkeninize dayalı yeni bir değişken oluşturmak için Etiketler > Yeni'ye gitmek yerine Değişkenler > Yeni'ye gidin.

Özelleştirilebilen değişken şablonu oluşturmaya ilişkin eksiksiz bir kılavuz için özelleştirilebilen değişken oluşturma bölümüne bakın.

Dışa ve içe aktarma

Özel bir şablonu kuruluşunuzla paylaşmak için 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. Şablon Düzenleyici'de boş bir şablon açılır.
  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.