Ö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, yerleşik etiketle birlikte kullanabileceği ve kuruluşunuzdaki diğer değişken şablonları. Özel şablonların izin odaklı, korumalı alana alınmış yapısı özel etiketleri ve değişkenleri daha güvenli ve verimli bir şekilde yazmayı mümkün kılar özel HTML etiketleri ve özel JavaScript değişkenleri kullanımına kıyasla daha yüksek bir esneklik sağlar.

Özel etiket ve değişken şablonları şuranın Şablonlar bölümünde tanımlanmıştır: Google Etiket Yöneticisi. Şablonlar ana ekranında tüm etiketler veya değişkenler listelenir daha önceden tanımlanmış olan şablonlardan yararlanabilirsiniz. Ayrıca özelleştirilebilir yeni şablonlar hazırlayabilirsiniz.

Bir şablonu dışa aktarıp kuruluşunuzdaki diğer kişilerle paylaşabilirsiniz. proje yönetiminde daha geniş bir dağıtım için Topluluk Şablon Galerisi.

Şablon Düzenleyici

Şablon Düzenleyici özel şablonlar oluşturmanıza, önizlemenize ve test etmenize olanak tanır. Etiket şablonunuzu tanımlamanıza yardımcı olacak dört ana alanı vardır:

  • Bilgi: Şablonun temel özelliklerini tanımlayın (ör. etiket veya değişken adı ve simgesi.
  • Alanlar: Bu, etiket şablonunuza giriş alanları eklemek için kullanılan bir görsel düzenleyicidir.
  • Kod: Etiketinizin veya değişkeninizin nasıl olacağını tanımlamak için korumalı alana alınmış JavaScript girin düşünmesi gerekir.
  • İzinler: Etiket veya değişkeninizin ne olduğuna ilişkin sınırları görüntüleyin ve ayarlayın izin verilir.

İlk özel etiket şablonunuzu oluşturun

Bu örnek, temel bir örnek piksel etiketinin nasıl oluşturulacağı konusunda size yol gösterecektir. Zaman bu etiket bir web sayfasında tetiklenirse doğru hesapla bir isabet gönderir etiket sağlayıcının sunucularına gönderilir.

1. İlk şablonunuzu oluşturmaya başlamak için sol gezinme menüsünden Şablonlar'ı tıklayın ve Etiket Şablonları bölümünde Yeni düğmesini tıklayın.

2. Bilgi'yi tıklayın ve etiketin Ad (gerekli), Açıklama ve Simge.

Ad, bu etiketi uygulamak için kullanıcılara gösterilecek addır genel bir görünüm sunuyoruz.

Açıklama, adından da anlaşılacağı üzere özettir (200 karakter veya daha az) bir açıklama ekleyin.

Simge, etiket listeler. Simge resimleri kare PNG, JPEG veya kare olmalıdır. En az 50 kB ve en az 64 x 64 piksel boyutunda GIF dosyaları.

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

Alan girişlerinin sağında Şablon Önizleme penceresi bulunur. Hepsini düzenleyicide bir değişiklik yapıldığında Yenile düğmesi görünür. Sonraki slayta geçin Yaptığınız değişikliklerin etiketinizin görünümünde ne yaptığını görmek için yenileyin.

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

Şablon Düzenleyici'nin Alanlar sekmesi, etikette alanlar oluşturup düzenlemenize olanak tanır tıklayın. Alanlar, hesap kimliği gibi özel verileri girmek için kullanılır. Şunları yapabilirsiniz: metin alanları, açılır menüler, radyo düğmeleri ve ve onay kutularına dokunun.

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

Alanda, bilinen değişken seçici (değişken seçici simgesi) simgesi olacaktır tıklayın. Bu şablonu kullananlar, değişken seçici simgesini tıklayarak bu kapsayıcıda etkin olan değişkenleri seçin.

Sonraki adım, alana bir etiket eklemektir:

6. Daha fazla öğe açmak için metin alanının yanındaki genişlet simgesini (genişlet simgesi) tıklayın kullanabilirsiniz. "Account ID" (Hesap Kimliği) girin Görünen ad alanına girin. İçinde Şablon Önizleme, Yenile'yi tıklayın.

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

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

Kodun ilk satırı (const sendPixel = require('sendPixel')), sendPixel API.

Kodun ikinci satırı olan const encodeUriComponent = require('encodeUriComponent'), encodeUriComponent API'yi içe aktarır.

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

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

Son satır olan sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure) sendPixel() işlevini yerine getirir ve belirtir. data.gtmOnSuccess ve data.gtmOnFailure değerleri, Etiket, görevini tamamladığında veya başarısız olduğunda Google Etiket Yöneticisi'ni kullanarak Google Etiket Yöneticisi tarafından etiket dizilimi veya önizleme moduna geçiş yapın.

8. İlerlemenizi kaydetmek için Kaydet'i tıklayın. Bu işlem, algılanan tüm izinleri yükler bulun.

Bazı Şablon API'leri, kendileriyle ilişkilendirilmiş izinlere ve bu API'lerle kullanıcıların yapamadığını anlarsınız. sendPixel kodunu eklediğinizde, Etiket Yöneticisi ilgili izinleri İzinler sekmesinde gösterir.

9. sendPixel uygulamasının hangi alanları göndermesine izin verileceğini hassaslaştırmak için İzinler'i tıklayın . Piksel Gönder girişi için genişlet simgesini (genişlet simgesi) tıklayın ve İzin Verilen URL Eşleşme Kalıpları alanına https://endpoint.example.com/ değerini girin.

Bir etiket şablonu veri gönderecek şekilde yapılandırıldığında, İzin verilen Verilerin gösterildiği yerleri kısıtlamak için ilişkili iznin altındaki URL Eşleşme Kalıbı kararlaştırılır. Kodunuzda belirtilen URL, izin verilen bir URL ile eşleşmiyorsa eşleşme kalıbıyla eşleşmemesi halinde 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. İlgili içeriği oluşturmak için kullanılan ana makine bir alan adı (ör. "https://example.com/") veya belirli bir alt alan adı olabilir (ör. "https://sub.example.com/"). Yol en az bir "/" içermelidir. Bir alt alan adını veya yol kalıbını belirtmek için joker karakter olarak yıldız işareti (*) kullanın herhangi bir uzunlukta (ör. "https://\*.example.com/test/"). Yıldız işareti bir joker karakterdir çeşitli olası kalıpları yakalayacak bir karakterdir, ör. "\*.example.com/" www.example.com, shop.example.com, blog.example.com vb. kullanabilirsiniz. Yıldız işaretinden önce ters eğik çizgi kullanılmalıdır karakter: "\*". Ek karakter içermeyen URL (ör. "https://example.com/"), joker karakterle biten (yani "https://example.com/\*".

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.

Algılanan hatalar Konsol penceresinde gösterilir.

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 olduğu gibidir:

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

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

Özelleştirilebilen değişken şablonları etiket şablonlarına benzer, ancak birkaç dikkat çekici farklar:

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

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

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

  • Etiketler > Yeni özelleştirilebilen değişken için Değişkenler > Yeni

Özelleştirilebilen değişken oluşturmayla ilgili eksiksiz bir kılavuz için özelleştirilebilen değişken oluşturma bölümüne bakın tıklayın.

Dışa aktarma ve içe aktarma

Bir özel şablonu kuruluşunuzla paylaşmak için özel şablonu dışa aktarabilirsiniz şablonu oluşturup diğer Etiket Yöneticisi kapsayıcılarına aktarın. 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. Bu, Şablonu Şablon Düzenleyici'de açın.
  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.