Vorhandenes Tag konvertieren

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.

Hinweis: In der Praxis sollten Sie injectScript() vermeiden und das Zielskript stattdessen direkt in JavaScript in einer Sandbox implementieren. Dies erfordert weniger Vertrauen bei einem Drittanbieter, wodurch es wahrscheinlicher ist, dass es von erzwungenen Richtlinien zugelassen wird.

Ursprüngliches Tag

Achtung: Das Skript analytics.js dient hier als Beispiel. Es sollte jedoch nicht in der Produktion verwendet werden. Folgen Sie stattdessen der Anleitung unter Google Analytics mit Tag Manager bereitstellen.

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

1. Gehen Sie zum Tab Fields und klicken Sie auf Add Field.

   

2. Wählen Sie den Feldtyp Text input aus.

   

3. Ändern Sie die ID von text1 in trackingId.

   

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

Hinweis: Die URL des Skripts hat in der Regel einen guten cacheToken-Wert.

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 derselben cacheToken

Achtung :Vergessen Sie nicht, den data.gtmOnSuccess-Callback für injectScript() anzugeben. data.gtmOnSuccess muss für alle benutzerdefinierten Vorlagen aufgerufen werden. Wenn Sie einen eigenen Erfolgs-Callback angeben, muss data.gtmOnSuccess aufgerufen werden.

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:

1. Rufen Sie den Tab Permissions auf, maximieren Sie Accesses Global Variables und klicken Sie dann auf Add Key.

   

2. Verwenden Sie ga für den Schlüssel und klicken Sie die Kästchen für Read, Write und Execute an.

   

3. Wiederholen Sie diesen Vorgang für ga.q und ga.l. Für diese Felder ist die Berechtigung Execute 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:

1. Fügen Sie https://www.google-analytics.com/analytics.js zu Allowed URL Match Patterns hinzu.

   

   Hinweis: URL Match Patterns lässt Platzhalter für die Subdomain und den Pfad zu, daher hätten Sie https://www.google-analytics.com/* verwenden können. Spezifischere Abgleichsmuster werden jedoch nach Möglichkeit bevorzugt. Die vollständigen Richtliniendetails finden Sie in der insert_script-Richtlinie.

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