Bu kılavuzda, korumalı alana sahip JavaScript kullanmak için mevcut bir özel HTML etiketini nasıl dönüştüreceğinizi öğreneceksiniz.
Bu eğitim, injectScript
API'den yararlanacaktır. injectScript
, üçüncü taraf komut dosyalarını kullanan mevcut bir etiketi dönüştürmek için yaygın olarak kullanılan bir API'dir. Bu etiketler, genellikle komut dosyası yüklenirken temel işlevleri ayarlar ve komut dosyası yüklendikten sonra ek işlevlerle zenginleştirir.
Orijinal etiket
<!-- 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ürün
Yukarıdaki etiketin JavaScript bölümünü göz önünde bulundurun:
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
Gerekli korumalı JavaScript'i oluşturmak için bu komut dosyasının hangi yerel JavaScript API'lerini kullandığına bakın ve kodunuzu, korumalı alana alınmış eşdeğer JavaScript API'lerini kullanacak şekilde dönüştürün.
Ö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 |
Korumalı alana sahip JavaScript API'lerini komut dosyanızda 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
dosyasını 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()
koduna 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:
Fields
sekmesine gidin veAdd Field
düğmesini tıklayın.Text input
alan türünü seçin.text1
olan kimliğitrackingId
olarak değiştirin.
Bu noktada, ilk <script/>
etiketini dönüştürmüş oldunuz, ancak destekleyici komut dosyasını da yüklemeniz gerekiyor.
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);
injectScript()
öğesine cacheToken
iletmek optimizasyon sağlar. Aşağıdaki senaryolarda analytics.js
komut dosyası yalnızca bir kez yüklenir:
- Birden çok kez çalıştırılan bir etiket
- Bu özel şablondan aynı kapsayıcıda yer alan birden fazla etiket.
- Aynı
cacheToken
ileinjectScript()
kullanan diğer özel şablonlar
İzinler
Bu kodu bu noktadan önce çalıştırmayı denediyseniz konsolda bazı hatalar olduğunu fark etmiş olabilirsiniz.
Bu hatalar, korumalı alana sahip JavaScript'in eriştiğiniz değerleri ve URL'leri bildirmenizi gerektirdiği için görünür. Bu örnekte ga.q
, ga.l
ve ga
genel değişkenlerine erişmeniz ve https://www.google-analytics.com/analytics.js
adresinde barındırılan bir komut dosyası yerleştirmek istiyorsunuz.
Global Variables
izinlerini yapılandırmak için:
Permissions
sekmesine gidin,Accesses Global Variables
uzantısını genişletin veAdd Key
simgesini tıklayın.Anahtar için
ga
kullanın veRead
,Write
veExecute
kutularını işaretleyin.Bu işlemi
ga.q
vega.l
için tekrarlayın. Bu alanlarınExecute
iznine ihtiyaç duymadığını unutmayın.
Bu noktada Kodu Çalıştır'ı tekrar tıklarsanız konsolda yeni bir hata alırsınız.
Bu kez hatada Inject Scripts
ifadesinden bahsediliyor.
Inject Scripts
iznini yapılandırmak için:
https://www.google-analytics.com/analytics.js
adlı kullanıcıyıAllowed URL Match Patterns
içine ekleyin.
Artık Kodu Çalıştır'ı tıkladığınızda, konsolda herhangi bir hata görüntülenmiyor. Etiketi başarıyla özel bir şablona dönüştürmüş oldunuz. Save
'i 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ınan nihai JavaScript sonucunuz aşağıdaki gibi 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);