Пользовательский шаблон Google Tag Manager в «песочнице» Javascript Проблема

Question

Я создал собственный шаблон с помощью диспетчера тегов Google, однако у меня возникли некоторые трудности с тем, чтобы заставить работать свою «песочницу» javascript, я знаю, что скрипт введен правильно, потому что следующие

log ('Cotaylitcs: скрипт успешно загружен.');

выводит на консоль. Я просто не могу вызвать свои функции. Я также включил код JS.

Пользовательский код шаблона (в изолированном виде Javascript)

// Enter your template code here.
const log = require('logToConsole');
const injectScript = require('injectScript');
const copyFromWindow = require('copyFromWindow');
const callInWindow = require('callInWindow');
const callLater = require('callLater');
const setInWindow = require('setInWindow');

const key = "testing";
const value = "test2";
const url = 'https://api.deve/cotalytics/cotalytics.js';


// If the script loaded successfully, log a message and signal success
const onSuccess = () => {
  log('Cotaylitcs: Script loaded successfully.');


  const cotalytics = copyFromWindow('cotalytics');
  log(cotalytics);
  callInWindow('cotalytics.addEvent',"testing12" ,{key: value}, "{{DL - cottageCode}}");
  callInWindow('cotalytics.logEvents()');
  data.gtmOnSuccess();
};

// If the script fails to load, log a message and signal failure
const onFailure = () => {
  log('Cotaylitcs: Script load failed.');
  data.gtmOnFailure();
};

injectScript(url, onSuccess, onFailure, 'cotalytics');

Мой Javascript код, который вводится Sandboxed Js:

let Cotalytics = function(){
    this.init();
};

// Init
Cotalytics.prototype = 
{
    init: function () {

        var cotalytics = this;

        // Argument Assignment                                                                              
        //cotalytics.endpoint           =  'https://localhost:44301/api/events/',
        //cotalytics.async              =  true,
        //cotalytics.debug              = true,
        //cotalytics.events             = {}

        //creat cookie here

        return cotalytics;
    },
      // Add Interaction Object Triggered By Events to Records Array
    addEvent: function (eventType, data, cottageCode, brandid) {
        data = data || {};
        cottageCode = cottageCode || null;

        data.Browser = window.navigator.appVersion;

        var cotalytics  = this;

            // cotalytics Object
            cotalytics.events     = {
                timestamp       : new Date(),
                cottagecode     : cottageCode,
                type            : eventType,
                ipaddress       : "127.0.0.1",
                requesturl      : window.location.href,
                sessionid       : "1234567",
                brandid         : brandid,
                eventData  : Object.keys(data).map(function(key) { return {"key": key, "value": data[key]}})
            };


        // Log Interaction if Debugging

            //cotalytics.logEvents();
            //console.log("Session:\n", interactor.interaction);
            //var data =JSON.stringify(interactor)
           console.log("JSON:\n", JSON.stringify(cotalytics));


        return cotalytics;
    },
     // Gather Additional Data and Send Interaction(s) to Server
     logEvents: function () {

        var cotalytics  = this,
            // Initialize Cross Header Request
            xhr         = new XMLHttpRequest();

        // Post Session Data Serialized as JSON
        xhr.open('POST', 'https://localhost:44301/api/events/', true);

        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        var data = JSON.stringify(cotalytics.events);
        xhr.send(data);

        return cotalytics;
        }
};


window.cotalytics = new Cotalytics();

Answer 1

Хорошо, похоже, вы в основном там, но есть несколько вещей, которые не совсем верны.

1. Использование {key: value} в вызове addEvent. Пока значение будет заполнено вашей константой, ключ не будет. Я представляю, что это будут динамические c переменные, так почему бы вам не иметь что-то вроде:

const kvp= {};
const key = "yourKey";
const value = "yourValue";
kvp[key] = value;

Это создаст объект с ключом, который вы хотите, а не просто " ключ».

Эта строка здесь не будет работать. Вы не можете использовать переменные контейнера в пользовательском шаблоне.

callInWindow('cotalytics.addEvent',"testing12" ,{key: value}, "{{DL - cottageCode}}");

Это похоже на переменную dataLayer, так почему бы вам не использовать API copyFromDataLayer и попробовать это?

const copyFromDataLayer = require('copyFromDataLayer');
const cottageCode = copyFromDataLayer('cottageCode');

logEvents callInWindow callInWindow('cotalytics.logEvents()'); не нуждается в скобках, он просто callInWindow('cotalytics.logEvents');.

Последний код, который я получил, был:

const log = require('logToConsole');
const injectScript = require('injectScript');
const callInWindow = require('callInWindow');
const makeTableMap = require('makeTableMap');
const copyFromDataLayer = require('copyFromDataLayer');

const cottageCode = copyFromDataLayer('cottageCode');

//Create the Key Value Pair
const kvp = {};
const key = "testing";
const value = "test2";
kvp[key]=value;

const url = "https://api.deve/cotalytics/cotalytics.js";

// If the script loaded successfully, log a message and signal success
const onSuccess = () => {
  log('Cotaylitcs: Script loaded successfully.');
  callInWindow('cotalytics.addEvent',"testing12" ,kvp,cottageCode);
  callInWindow('cotalytics.logEvents');
  data.gtmOnSuccess();
};

// If the script fails to load, log a message and signal failure
const onFailure = () => {
  log('Cotaylitcs: Script load failed.');
  data.gtmOnFailure();
};

injectScript(url, onSuccess, onFailure, 'cotalytics');

Надеюсь это помогает, спросите, если у вас есть другие вопросы!

Answer 2

Мне удалось решить это сейчас. Я все еще использую пользовательский шаблон, но мне нужно было добавить новый пользовательский тег HTML, который вставлял мой сценарий. JS во все страницы, после этого мой пользовательский тег шаблона работал.