Przekonwertuj istniejący tag

Z tego przewodnika dowiesz się, jak przekonwertować istniejący niestandardowy tag HTML na używaj JavaScriptu w trybie piaskownicy.

W tym samouczku będzie używany interfejs API injectScript. injectScript to typowa odmiana Interfejs API używany do konwersji istniejącego tagu, który korzysta ze skryptów firm zewnętrznych. Te tagi często konfiguruje podstawowe funkcje podczas wczytywania skryptu, a następnie rozszerzają je o dodatkowe funkcje po wczytaniu skryptu.

Uwaga: w praktyce należy unikać injectScript() i zamiast tego zaimplementować skrypt docelowy bezpośrednio w JavaScripcie w trybie piaskownicy. To wymaga mniejszego zaufania innych firm, przez co jest bardziej prawdopodobne, że będą egzekwowane przez egzekwowane zasady.

Pierwotny tag

Uwaga: jako przykład użyliśmy skryptu analytics.js, ale powinien on nie powinny być używane w środowisku produkcyjnym. Zamiast tego wykonaj Wdróż Google Analytics za pomocą Menedżera tagów

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

Konwertowanie kodu

Przyjrzyjmy się części JavaScript w tym tagu:

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

Aby utworzyć niezbędny JavaScript w trybie piaskownicy, sprawdź, jaki natywny kod JavaScript interfejsów API, z których korzysta ten skrypt, i przekonwertuj swój kod na odpowiedniki w trybie piaskownicy API JavaScript.

Na przykład w tagu analytics.js używane są te natywne interfejsy API JavaScript:

Natywny kod JavaScript	JavaScript w trybie piaskownicy
window.ga	setInWindow
arguments	createArgumentsQueue
+ new Date	getTimestamp

Aby używać w skrypcie interfejsów API JavaScript w trybie piaskownicy, musisz je wykonać w skrypcie require. Aby np. użyć interfejsu API setInWindow(), dodaj go na górze skryptu:

const setInWindow = require('setInWindow');

Następnie przekonwertuj window.ga:

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

Następnie przekonwertuj projekt ga.l:

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

Na koniec przekonwertuj oba wywołania na ga():

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

Aby użyć szablonu data.trackingId, dodaj pole do szablonu:

1. Otwórz kartę Fields i kliknij Add Field.

   

2. Wybierz typ pola Text input.

   

3. Zmień identyfikator z text1 na trackingId.

   

Na tym etapie masz już przekonwertowany pierwszy tag <script/>, ale potrzebujesz też by wczytać skrypt pomocniczy.

Aby to zrobić:

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

Uwaga: adres URL skryptu to zwykle dobra wartość cacheToken.

Przekazywanie cacheToken do injectScript() umożliwia optymalizację. W przypadku atrybutu w tych scenariuszach skrypt analytics.js zostanie wczytany tylko raz:

• Tag uruchamiany wiele razy
• Więcej niż 1 tag z tego szablonu niestandardowego w tym samym kontenerze.
• inne szablony niestandardowe korzystające z elementu injectScript() o tej samej wartości cacheToken.

.

Uwaga: pamiętaj o podaniu wywołania zwrotnego data.gtmOnSuccess do injectScript(). Dla wszystkich niestandardowych należy wywołać funkcję data.gtmOnSuccess szablonów. Jeśli podajesz własne pomyślne wywołanie zwrotne, upewnij się, że wywołuje ono data.gtmOnSuccess.

Uprawnienia

Jeśli próbujesz uruchomić ten kod wcześniej, możesz zauważyć, w konsoli.

Te błędy pojawiają się, ponieważ JavaScript w trybie piaskownicy wymaga zadeklarowania używane wartości i adresy URL. W tym przykładzie potrzebujesz dostępu do: ga.q, ga.l i ga zmiennych globalnych, a chcesz dodać skrypt, który jest hostowany o https://www.google-analytics.com/analytics.js.

Aby skonfigurować uprawnienia funkcji Global Variables:

1. Przejdź na kartę Permissions, Rozwiń Accesses Global Variables i i kliknij Add Key.

   

2. Użyj klucza ga i zaznacz pola wyboru Read, Write i Execute

   

3. Powtórz ten proces dla elementów ga.q i ga.l. Zwróć uwagę, że w tych polach nie trzeba podawać wartości uprawnienia Execute.

   

Jeśli ponownie klikniesz Uruchom kod, w konsoli pojawi się nowy błąd. Tym razem błąd dotyczy: Inject Scripts.

Aby skonfigurować uprawnienie Inject Scripts:

1. Dodaj https://www.google-analytics.com/analytics.js do Allowed URL Match Patterns.

   

   Uwaga: URL Match Patterns zezwala na użycie symboli wieloznacznych w subdomenach i ścieżkach, więc można było użyć https://www.google-analytics.com/*. Jednak więcej w miarę możliwości preferowane są konkretne wzorce dopasowania. Zobacz inject_script Policy, aby poznać wszystkie informacje o zasadach.

Teraz gdy klikniesz Uruchom kod, konsola nie powinna już zawierać błędów. Masz Tag został przekonwertowany na szablon niestandardowy. Kliknij Save. i używać go tak samo jak dowolnego innego tagu w Menedżerze tagów Google.

Tag w pełni skonwertowany

Końcowy wynik JavaScriptu w trybie piaskownicy powinien wyglądać tak:

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