Bu sayfa, Cloud Translation API ile çevrilmiştir.

Mevcut bir etiketi dönüştürme

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 ve Add Field düğmesini tıklayın.
Text input alan türünü seçin.
text1 olan kimliği trackingId 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 ile injectScript() kullanan diğer özel şablonlar

İzinler

Bu kodu bu noktadan önce çalıştırmayı denediyseniz konsolda bazı hatalar olduğunu fark etmiş olabilirsiniz.

Genel kitlelere erişilirken hata oluştu

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 ve Add Key simgesini tıklayın.
Anahtar için ga kullanın ve Read, Write ve Execute kutularını işaretleyin.
Bu işlemi ga.q ve ga.l için tekrarlayın. Bu alanların Execute 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.

Komut Dosyası Ekleme Konsolu Hatası

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.

Not: URL Match Patterns alt alan ve yol için joker karakterlere izin verir. Bu nedenle, https://www.google-analytics.com/* kullanabilirsiniz. Ancak mümkünse daha spesifik eşleşme kalıpları tercih edilir. Politikanın tüm ayrıntıları için inject_script Politikası'na bakın.

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