In diesem Leitfaden erfahren Sie, wie Sie ein vorhandenes benutzerdefiniertes HTML-Tag für den Einsatz von JavaScript, das in einer Sandbox ausgeführt wird, konvertieren.
In dieser Anleitung wird die injectScript
API verwendet. injectScript
ist eine gängige API, die zum Konvertieren eines vorhandenen Tags verwendet wird, das auf Skripts von Drittanbietern basiert. Diese Tags richten häufig grundlegende Funktionen ein, während ein Skript geladen wird. Nach dem Laden des Skripts wird es um zusätzliche Funktionen erweitert.
Ursprüngliches 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 -->
Code konvertieren
Betrachten Sie den JavaScript-Teil des obigen Tags:
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
Um das erforderliche JavaScript in einer Sandbox zu erstellen, sehen Sie sich an, welche nativen JavaScript-APIs dieses Skript verwendet, und konvertieren Sie Ihren Code, um die entsprechenden JavaScript-APIs zu verwenden, die in einer Sandbox ausgeführt werden.
Im analytics.js
-Tag werden beispielsweise diese nativen JavaScript APIs verwendet:
Natives JavaScript | JavaScript in Sandbox |
---|---|
window.ga |
setInWindow |
arguments |
createArgumentsQueue |
+ new Date |
getTimestamp |
Wenn Sie die JavaScript APIs, die in einer Sandbox ausgeführt werden, in Ihrem Skript verwenden möchten, müssen Sie sie mit require
versehen.
Wenn Sie beispielsweise die setInWindow()
API verwenden möchten, fügen Sie sie oben in Ihrem Script ein:
const setInWindow = require('setInWindow');
Konvertieren Sie als Nächstes window.ga
:
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)}
// becomes
const createArgumentsQueue = require('createArgumentsQueue');
const ga = createArgumentsQueue('ga', 'ga.q');
Konvertieren Sie dann die Zuweisung ga.l
:
ga.l=+new Date;
// becomes
const getTimestamp = require('getTimestamp');
setInWindow('ga.l', getTimestamp(), true);
Konvertieren Sie abschließend die beiden Aufrufe in ga()
:
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
// becomes
const trackingId = data.trackingId;
ga('create', trackingId, 'auto');
ga('send', 'pageview');
Fügen Sie Ihrer Vorlage ein Feld hinzu, um data.trackingId
zu verwenden:
Gehen Sie zum Tab
Fields
und klicken Sie aufAdd Field
.Wählen Sie den Feldtyp
Text input
aus.Ändern Sie die ID von
text1
intrackingId
.
Sie haben jetzt das erste <script/>
-Tag konvertiert. Sie müssen aber auch das unterstützende Skript laden.
Das geht so:
<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);
Wenn ein cacheToken
an injectScript()
übergeben wird, wird eine Optimierung aktiviert. In den folgenden Szenarien wird das Skript analytics.js
nur einmal geladen:
- Ein Tag, das mehrmals ausgeführt wird
- Mehr als ein Tag aus dieser benutzerdefinierten Vorlage im selben Container.
- Andere benutzerdefinierte Vorlagen mit
injectScript()
und derselbencacheToken
Berechtigungen
Wenn Sie bereits versucht haben, diesen Code auszuführen, sind Ihnen möglicherweise Fehler in der Konsole aufgefallen.
Diese Fehler treten auf, weil Sie bei JavaScript, das in einer Sandbox ausgeführt wird, die Werte und URLs angeben müssen, auf die Sie zugreifen. In diesem Beispiel müssen Sie auf die globalen Variablen ga.q
, ga.l
und ga
zugreifen und ein Skript einfügen, das unter https://www.google-analytics.com/analytics.js
gehostet wird.
So konfigurieren Sie die Global Variables
-Berechtigungen:
Rufen Sie den Tab
Permissions
auf, maximieren SieAccesses Global Variables
und klicken Sie dann aufAdd Key
.Verwenden Sie
ga
für den Schlüssel und klicken Sie die Kästchen fürRead
,Write
undExecute
an.Wiederholen Sie diesen Vorgang für
ga.q
undga.l
. Für diese Felder ist die BerechtigungExecute
nicht erforderlich.
Wenn Sie jetzt noch einmal auf Code ausführen klicken, wird in der Konsole eine neue Fehlermeldung angezeigt.
Dieses Mal erwähnt der Fehler Inject Scripts
.
So konfigurieren Sie die Berechtigung Inject Scripts
:
Fügen Sie
https://www.google-analytics.com/analytics.js
zuAllowed URL Match Patterns
hinzu.
Wenn Sie jetzt auf Code ausführen klicken, sollten keine Fehler in der Konsole auftreten. Sie haben das Tag erfolgreich in eine benutzerdefinierte Vorlage konvertiert. Klicken Sie auf Save
und verwenden Sie das neue Tag wie jedes andere Tag in Google Tag Manager.
Vollständig konvertiertes Tag
Das endgültige Ergebnis für JavaScript in einer Sandbox sollte so aussehen:
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);