Vorhandenes Tag konvertieren

In diesem Leitfaden erfahren Sie, wie Sie ein vorhandenes benutzerdefiniertes HTML-Tag in in einer Sandbox ausgeführtes JavaScript verwenden.

In dieser Anleitung wird die injectScript API verwendet. injectScript ist häufig API zum Konvertieren eines vorhandenen Tags, das auf Drittanbieterskripts basiert. Diese werden während des Ladens eines Skripts häufig grundlegende Funktionen eingerichtet. nach dem Laden des Skripts.

Hinweis: In der Praxis sollten Sie injectScript() vermeiden und stattdessen die Methode Zielskript direkt in JavaScript in einer Sandbox ausführen. Das erfordert weniger Vertrauen in eine Drittanbieter-Apps. Dadurch erhöht sich die Wahrscheinlichkeit, dass sie durch erzwungene Richtlinien zugelassen werden.

Ursprüngliches Tag

Achtung :Das Skript analytics.js wird hier als Beispiel verwendet. nicht in der Produktion verwendet werden. Folgen Sie stattdessen 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 notwendige JavaScript in einer Sandbox zu erstellen, sehen Sie sich an, was natives APIs, die von diesem Skript verwendet werden, und konvertieren Sie Ihren Code, um die entsprechende Sandbox JavaScript-APIs.

Im analytics.js-Tag werden beispielsweise die folgenden nativen JavaScript APIs verwendet:

Natives JavaScript	JavaScript in Sandbox
window.ga	setInWindow
arguments	createArgumentsQueue
+ new Date	getTimestamp

Wenn Sie die in einer Sandbox ausgeführten JavaScript APIs in Ihrem Skript verwenden möchten, müssen Sie sie mit einem require-Vorgang versehen. Wenn Sie beispielsweise die setInWindow() API verwenden möchten, fügen Sie sie am Anfang des Skripts hinzu:

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 vom Typ 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');

Wenn Sie data.trackingId verwenden möchten, fügen Sie Ihrer Vorlage ein Feld hinzu:

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 das erste <script/>-Tag konvertiert. in das unterstützende Skript ein.

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.

Durch Übergabe von cacheToken an injectScript() wird eine Optimierung aktiviert. Für die In folgenden Szenarien wird das analytics.js-Skript nur einmal geladen:

• Tag, das mehrmals ausgeführt wird
• Mehr als ein Tag aus dieser benutzerdefinierten Vorlage im selben Container.
• Andere benutzerdefinierte Vorlagen, die injectScript() mit demselben cacheToken verwenden

Achtung: Vergessen Sie nicht, den data.gtmOnSuccess-Callback anzugeben. an injectScript(). data.gtmOnSuccess muss für alle benutzerdefinierten Vorlagen. Wenn Sie Ihren eigenen Erfolgs-Callback bereitstellen, achten Sie darauf, dass dieser den data.gtmOnSuccess

Berechtigungen

Wenn Sie bereits versucht haben, diesen Code auszuführen, in der Konsole angezeigt.

Diese Fehler werden angezeigt, weil für JavaScript, das in einer Sandbox ausgeführt wird, die Deklaration des und URLs, auf die Sie zugreifen. In diesem Beispiel müssen Sie auf ga.q zugreifen, ga.l und ga gibt und Sie ein Skript einfügen möchten, um https://www.google-analytics.com/analytics.js.

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 als Schlüssel und klicken Sie die Kästchen für Read, Write und Execute.

   

3. Wiederholen Sie diesen Vorgang für ga.q und ga.l. Diese Felder benötigen keine die Berechtigung Execute.

   

Wenn Sie jetzt noch einmal auf Code ausführen klicken, wird in der Konsole ein neuer Fehler angezeigt. Dieses Mal wird in der Fehlermeldung Inject Scripts erwähnt.

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 lassen Platzhalter für die Subdomain und den Pfad zu. also hätten Sie https://www.google-analytics.com/* verwenden können. Es gibt jedoch mehr werden, wenn möglich, spezifische Übereinstimmungsmuster bevorzugt. Weitere Informationen finden Sie in der Inji_script-Richtlinie für die vollständigen Richtliniendetails

Wenn Sie jetzt auf Code ausführen klicken, sollten keine Fehler in der Konsole auftreten. Du hast das Tag 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, das in einer Sandbox ausgeführt wird, sollte in etwa 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);