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 kliknijAdd Field
.Wybierz typ pola
Text input
.Zmień identyfikator z
text1
natrackingId
.
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.
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 kliknijAdd Key
.Użyj
ga
jako klucza i zaznacz polaRead
,Write
iExecute
.Powtórz ten proces dla
ga.q
iga.l
. Pamiętaj, że te pola nie wymagają uprawnieniaExecute
.
Jeśli w tym momencie ponownie klikniesz Uruchom kod, w konsoli pojawi się nowy błąd.
Tym razem błąd dotyczy kolumny Inject Scripts
.
Aby skonfigurować uprawnienie Inject Scripts
:
Dodaj
https://www.google-analytics.com/analytics.js
doAllowed URL Match Patterns
.
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);