Ta strona została przetłumaczona przez Cloud Translation API.

Przekonwertuj istniejący tag

Z tego przewodnika dowiesz się, jak przekonwertować niestandardowy tag HTML na taki, który używa kodu JavaScript w trybie piaskownicy.

Ten samouczek będzie wykorzystywać interfejs injectScript API. injectScript to typowy interfejs API używany do konwersji dotychczasowego tagu, który korzysta ze skryptów innych firm. Te tagi często ustawiają podstawowe funkcje podczas wczytywania skryptu, a potem po wczytaniu skryptu rozszerzają je o dodatkowe funkcje.

Pierwotny tag

<!-- 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 -->

Konwertowanie kodu

Przeanalizuj fragment powyższego tagu zawierający kod JavaScript:

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

Aby utworzyć niezbędny skrypt JavaScript w trybie piaskownicy, zobacz, z jakich natywnych interfejsów API JavaScriptu korzysta ten skrypt, i przekonwertuj swój kod na odpowiadające im interfejsy API JavaScript w trybie piaskownicy.

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

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

Aby użyć w skrypcie interfejsów API JavaScript w trybie piaskownicy, musisz je require. Aby na przykład użyć interfejsu API setInWindow(), dodaj go na początku 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 te 2 wywołania na format ga():

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

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

Otwórz kartę Fields i kliknij Add Field.
Wybierz typ pola Text input.
Zmień identyfikator z text1 na trackingId.

Na tym etapie masz już przekonwertowany pierwszy tag <script/>, ale musisz też 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);

Przekazywanie cacheToken do injectScript() włącza optymalizację. W tych sytuacjach skrypt analytics.js zostanie wczytany tylko raz:

tag, który jest uruchamiany wielokrotnie;
Więcej niż 1 tag z tego szablonu niestandardowego w tym samym kontenerze.
Inne szablony niestandardowe korzystające z elementu injectScript() z tą samą wartością cacheToken

Uprawnienia

Jeśli próbowałeś/próbowałaś wcześniej uruchomić ten kod, w konsoli mogły Ci się pojawić pewne błędy.

Błąd dostępu do globalnych

Te błędy pojawiają się, ponieważ JavaScript działający w trybie piaskownicy wymaga zadeklarowania wartości i adresów URL, do których masz dostęp. W tym przykładzie potrzebujesz dostępu do zmiennych globalnych ga.q, ga.l i ga i chcesz wstrzyknąć skrypt hostowany na serwerze https://www.google-analytics.com/analytics.js.

Aby skonfigurować uprawnienia Global Variables:

Otwórz kartę Permissions, Rozwiń kartę Accesses Global Variables i kliknij Add Key.
Użyj ga jako klucza i zaznacz pola Read, Write i Execute.
Powtórz ten proces dla ga.q i ga.l. Pamiętaj, że te pola nie wymagają uprawnienia Execute.

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

Błąd wstrzykiwania konsoli skryptów

Aby skonfigurować uprawnienie Inject Scripts:

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

Uwaga: w nazwie URL Match Patterns dozwolone są symbole wieloznaczne w przypadku subdomeny i ścieżki, więc można użyć https://www.google-analytics.com/*. W miarę możliwości preferowane są jednak bardziej szczegółowe wzorce dopasowania. Szczegółowe informacje znajdziesz w opisie zasady inject_script.

Teraz po kliknięciu Uruchom kod w konsoli nie powinny być wyświetlane żadne błędy. Udało Ci się przekonwertować tag na szablon niestandardowy. Kliknij Save i używaj nowego tagu tak samo jak dowolnego innego tagu w Menedżerze tagów Google.

Tag w pełni przekonwertowany

Ostateczny wynik JavaScript 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);