Mevcut bir etiketi dönüştürme

Bu kılavuzda, mevcut bir özel HTML etiketini korumalı alana alınmış JavaScript kullanmak.

Bu eğitimde injectScript API kullanılır. injectScript, üçüncü taraf komut dosyalarına dayanan mevcut bir etiketi dönüştürmek için kullanılan yaygın bir API'dir. Bu etiketleri genellikle bir komut dosyası yüklenirken temel işlevleri sağlar ve daha sonra, ek işlevsellik sağlayabilir.

Not: Pratikte injectScript() uygulamaktan kaçınmalı ve komut dosyasını doğrudan korumalı alana alınmış JavaScript'te hedefler. Bu da proje yöneticisinin 3. taraf. Bu nedenle, zorunlu kılınan Politikalar ile izin verilmesi olasılığını artırırsınız.

Orijinal etiket

Dikkat: analytics.js komut dosyası burada örnek olarak kullanılmıştır, ancak üretimde kullanılmaz. Bunun yerine Google Analytics'i Etiket Yöneticisi ile dağıtın.

<!-- Google Analytics -->
<script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXXX-1', 'auto');
  ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

Kodu dönüştürme

Yukarıdaki etiketin JavaScript bölümünü düşünün:

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');

Korumalı alana alınmış gerekli JavaScript'i oluşturmak için hangi yerel JavaScript'in Bu komut dosyasının kullandığı ve kodunuzu korumalı alana alınan eşdeğer API'leri kullanacak şekilde dönüştürür JavaScript API'leri.

Örneğin, analytics.js etiketinde şu yerel JavaScript API'leri kullanılır:

Yerel JavaScript	Korumalı Alana Sahip JavaScript
window.ga	setInWindow
arguments	createArgumentsQueue
+ new Date	getTimestamp

Komut dosyanızda korumalı alana alınan JavaScript API'lerini kullanmak için bunları require yapmanız gerekir. Örneğin, setInWindow() API'yi kullanmak için komut dosyanızın en üstüne ekleyin:

const setInWindow = require('setInWindow');

Ardından window.ga değerini dönüştürün:

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)}
// becomes
const createArgumentsQueue = require('createArgumentsQueue');
const ga = createArgumentsQueue('ga', 'ga.q');

Ardından ga.l atamasını dönüştürün:

ga.l=+new Date;
// becomes
const getTimestamp = require('getTimestamp');
setInWindow('ga.l', getTimestamp(), true);

Son olarak, iki çağrıyı ga() öğesine dönüştürün:

ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
// becomes
const trackingId = data.trackingId;
ga('create', trackingId, 'auto');
ga('send', 'pageview');

data.trackingId özelliğini kullanmak için şablonunuza bir alan ekleyin:

1. Fields sekmesine gidin ve Add Field düğmesini tıklayın.

   

2. Text input alan türünü seçin.

   

3. text1 olan kimliği trackingId olarak değiştirin.

   

Bu noktada, ilk <script/> etiketini dönüştürmüş oldunuz. Ancak, aşağıdakileri de yapmanız gerekir: destekleyici komut dosyasına yükleyin.

Bunun için:

<script async src='https://www.google-analytics.com/analytics.js'></script>

// becomes
const injectScript = require('injectScript');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);

Not: Komut dosyasının URL'si genellikle iyi bir cacheToken değeridir.

injectScript() öğesine cacheToken iletmek optimizasyon yapılmasını sağlar. aşağıdaki senaryolarda analytics.js komut dosyası yalnızca bir kez yüklenir:

• Birden çok kez çalışan bir etiket
• Bu özel şablonda yer alan birden fazla etiket aynı kapsayıcıda.
• Aynı cacheToken değeri ile injectScript() kullanan diğer özel şablonlar

ziyaret edin.

Dikkat: data.gtmOnSuccess geri arama özelliğini sağlamayı unutmayın injectScript() adlı yere. Tüm özel öğeler için data.gtmOnSuccess çağrılmalıdır kullanabilirsiniz. Başarıyla geri aranmak için bir geri arama sağlarsanız data.gtmOnSuccess.

İzinler

Bu kodu bu noktadan önce çalıştırmayı denediyseniz, örneğin birkaç kontrol edebilirsiniz.

Bu hatalar, korumalı alan JavaScript'i eriştiğiniz değerleri ve URL'leri belirtmenizi gerektirdiği için görünür. Bu örnekte, ga.q, ga.l ve ga genel değişkenleri içeriyor ve barındırılan bir komut dosyası yerleştirmek istiyorsunuz saat: https://www.google-analytics.com/analytics.js.

Global Variables izinlerini yapılandırmak için:

1. Permissions sekmesine gidin, Accesses Global Variables bölümünü genişletin ve Add Key simgesini tıklayın.

   

2. Anahtar için ga kullanın, Read, Write vene ait kutuları işaretleyin. Execute.

   

3. Bu işlemi ga.q ve ga.l için tekrarlayın. Bu alanlar için Execute izni.

   

Bu noktada tekrar Kodu Çalıştır'ı tıklarsanız konsolda yeni bir hata mesajı alırsınız. Bu kez hatada Inject Scripts yer alıyor.

Inject Scripts iznini yapılandırmak için:

1. Allowed URL Match Patterns içine https://www.google-analytics.com/analytics.js ekleyin.

   

   Not: URL Match Patterns, alt alan adı ve yol için joker karakterlere izin verir. Bu yüzden https://www.google-analytics.com/* kullanabilirsiniz. Ancak daha fazla mümkünse belirli eşleşme kalıpları tercih edilir. Bkz. Politika ayrıntılarının tamamı için inject_script politikasına bakın.

Artık Kodu Çalıştır'ı tıkladığınızda konsolda herhangi bir hata olmayacaktır. Bakiyeniz etiketi özel bir şablona başarıyla dönüştürdü. Save simgesini tıklayın ve yeni etiketinizi Google Etiket Yöneticisi'ndeki diğer etiketler gibi kullanın.

Tamamen dönüştürülmüş etiket

Korumalı alana alınmış son JavaScript sonucunuz şu şekilde görünmelidir:

const setInWindow = require('setInWindow');
const copyFromWindow = require('copyFromWindow');
const createArgumentsQueue = require('createArgumentsQueue');
const getTimestamp = require('getTimestamp');
const injectScript = require('injectScript');
const trackingId = data.trackingId;

const ga = createArgumentsQueue('ga', 'ga.q');
setInWindow('ga.l', getTimestamp(), false);
ga('create', trackingId, 'auto');
ga('send', 'pageview');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);