Google 태그 관리자 맞춤 템플릿 샌드 박스 자바 스크립트 문제

dbjoe

Google 태그 관리자를 사용하여 맞춤 템플릿을 만들었지 만 샌드 박스 자바 스크립트가 작동하도록하는 데 약간의 어려움이 있습니다. 다음과 같은 이유로 스크립트가 올바르게 삽입되었음을 알고 있습니다.

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


Sandboxed Js에 의해 주입되는 Javascript 코드 :


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



제임스

좋아, 대부분 거기에있는 것 같지만 옳지 않은 몇 가지가 있습니다.

  1. {key: value}addEvent 호출에서 사용 합니다. 값은 상수로 채워지지만 키는 채워지지 않습니다. 나는 이것이 동적 변수가 될 것이라고 상상하고 있는데, 왜 다음과 같은 것을 가지고 있지 않습니까?
const kvp= {};
const key = "yourKey";
const value = "yourValue";
kvp[key] = value;

그러면 단순히 "키"가 아닌 원하는 키로 개체가 생성됩니다.

  1. 이 줄은 작동하지 않습니다. 맞춤 템플릿에서는 컨테이너 변수를 사용할 수 없습니다.

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

dataLayer 변수처럼 보이지만 copyFromDataLayer API를 사용하여 시도해 보는 것은 어떻습니까?

const copyFromDataLayer = require('copyFromDataLayer');
const cottageCode = copyFromDataLayer('cottageCode');
  1. 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');

도움이 되었기를 바랍니다. 다른 질문이 있는지 물어보세요!

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

자바 스크립트 맞춤 이벤트 트리거 문제

분류에서Dev

이벤트 배열을 사용하여 Google 태그 관리자에서 맞춤 HTML 태그를 스크립트하는 방법

분류에서Dev

Google 태그 관리자 맞춤 이벤트 추적

분류에서Dev

Google AMP 및 맞춤 자바 스크립트

분류에서Dev

자바 스크립트 만 사용하여 맞춤 태그 사용

분류에서Dev

태그를 실행하지 않는 Google 태그 관리자 맞춤 이벤트 (제품 페이지보기)

분류에서Dev

Google 태그 관리자 및 애널리틱스를 사용한 기본 맞춤 이벤트 추적

분류에서Dev

맞춤형 대시 보드 자바 스크립트

분류에서Dev

자바 스크립트 스크립트 태그 안에 동적 Django 템플릿 변수 만들기

분류에서Dev

Google 태그 관리자를 통해 AMP 컨테이너에 맞춤 HTML 및 자바 스크립트 태그를 추가하려면 어떻게해야하나요?

분류에서Dev

Google 태그 관리자를 통한 유니버설 애널리틱스의 다중 값 맞춤 측정 기준

분류에서Dev

html 옵션 태그를 클릭하면 맞춤 자바 스크립트가 트리거되지 않습니다.

분류에서Dev

자바 스크립트에 따른 HTML 태그 문제

분류에서Dev

자바 스크립트 드래그 앤 드롭 기능 문제

분류에서Dev

자바 스크립트 드래그 앤 드롭 문제

분류에서Dev

자바 스크립트를 통한 Google-Plus 공유, 맞춤 이미지

분류에서Dev

자바 스크립트를 통한 Google-Plus 공유, 맞춤 이미지

분류에서Dev

자바 스크립트 태그 템플릿 문자열을 사용하여 배열 값을 보간 할 수 있습니까?

분류에서Dev

자바 스크립트-여러 맞춤 이벤트 리스너

분류에서Dev

맞춤 워드 프레스 쿼리 문자열 제거기

분류에서Dev

자바 스크립트 문자열에 대한 맞춤 정렬 비교기

분류에서Dev

두 번째 드롭 박스 URL 자바 스크립트 제출

분류에서Dev

자바 스크립트 정규식 문자열 템플릿 추출 변수

분류에서Dev

장고 태그가있는 자바 스크립트 코드를 장고 템플릿에 어떻게로드합니까?

분류에서Dev

자바 스크립트로 맞춤 Facebook 스토리 게시

분류에서Dev

맞춤 자바 스크립트에서 Blogger 태그의 값을 사용하는 방법은 무엇입니까?

분류에서Dev

태그가있는 자바 스크립트 변수 (문자열 빌드)

분류에서Dev

자바 스크립트 문자열에서 앰퍼샌드 사용

분류에서Dev

맞춤형 템플릿으로 SPA를 구축하기위한 최고의 자바 스크립트 프레임 워크

Related 관련 기사

  1. 1

    자바 스크립트 맞춤 이벤트 트리거 문제

  2. 2

    이벤트 배열을 사용하여 Google 태그 관리자에서 맞춤 HTML 태그를 스크립트하는 방법

  3. 3

    Google 태그 관리자 맞춤 이벤트 추적

  4. 4

    Google AMP 및 맞춤 자바 스크립트

  5. 5

    자바 스크립트 만 사용하여 맞춤 태그 사용

  6. 6

    태그를 실행하지 않는 Google 태그 관리자 맞춤 이벤트 (제품 페이지보기)

  7. 7

    Google 태그 관리자 및 애널리틱스를 사용한 기본 맞춤 이벤트 추적

  8. 8

    맞춤형 대시 보드 자바 스크립트

  9. 9

    자바 스크립트 스크립트 태그 안에 동적 Django 템플릿 변수 만들기

  10. 10

    Google 태그 관리자를 통해 AMP 컨테이너에 맞춤 HTML 및 자바 스크립트 태그를 추가하려면 어떻게해야하나요?

  11. 11

    Google 태그 관리자를 통한 유니버설 애널리틱스의 다중 값 맞춤 측정 기준

  12. 12

    html 옵션 태그를 클릭하면 맞춤 자바 스크립트가 트리거되지 않습니다.

  13. 13

    자바 스크립트에 따른 HTML 태그 문제

  14. 14

    자바 스크립트 드래그 앤 드롭 기능 문제

  15. 15

    자바 스크립트 드래그 앤 드롭 문제

  16. 16

    자바 스크립트를 통한 Google-Plus 공유, 맞춤 이미지

  17. 17

    자바 스크립트를 통한 Google-Plus 공유, 맞춤 이미지

  18. 18

    자바 스크립트 태그 템플릿 문자열을 사용하여 배열 값을 보간 할 수 있습니까?

  19. 19

    자바 스크립트-여러 맞춤 이벤트 리스너

  20. 20

    맞춤 워드 프레스 쿼리 문자열 제거기

  21. 21

    자바 스크립트 문자열에 대한 맞춤 정렬 비교기

  22. 22

    두 번째 드롭 박스 URL 자바 스크립트 제출

  23. 23

    자바 스크립트 정규식 문자열 템플릿 추출 변수

  24. 24

    장고 태그가있는 자바 스크립트 코드를 장고 템플릿에 어떻게로드합니까?

  25. 25

    자바 스크립트로 맞춤 Facebook 스토리 게시

  26. 26

    맞춤 자바 스크립트에서 Blogger 태그의 값을 사용하는 방법은 무엇입니까?

  27. 27

    태그가있는 자바 스크립트 변수 (문자열 빌드)

  28. 28

    자바 스크립트 문자열에서 앰퍼샌드 사용

  29. 29

    맞춤형 템플릿으로 SPA를 구축하기위한 최고의 자바 스크립트 프레임 워크

뜨겁다태그

보관