如何创建加载带数据属性的像素代码的GTM模板？

问题拆解 #

你当前的核心问题是：用原生DOM方法创建script标签不符合GTM沙箱规范，而injectScript方法无法直接为脚本标签添加自定义属性，需要用沙箱允许的API来实现需求。

正确的沙箱JavaScript实现 #

在GTM模板中，使用沙箱提供的模块来创建、配置脚本标签，同时处理好加载状态以触发GTM的成功/失败回调：

// 获取配置的API Key
const apiKey = data.apikey;
// 引入沙箱的document模块
const doc = require('document');
// 引入沙箱的promise模块处理异步加载
const promise = require('promise');

// 创建脚本元素
const script = doc.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdn.pixel.com/js/pixel.min.js';
// 为脚本添加token属性
script.setAttribute('token', apiKey);

// 封装脚本加载的Promise逻辑
const loadScript = () => {
  return new promise.Promise((resolve, reject) => {
    script.onload = resolve;
    script.onerror = reject;
    // 将脚本添加到页面head中
    doc.head.appendChild(script);
  });
};

// 执行加载并触发GTM的回调函数
loadScript()
  .then(() => data.gtmOnSuccess())
  .catch(() => data.gtmOnFailure());

关键注意点 #

• 必须使用GTM沙箱提供的require('document')，不能直接调用原生document，这是沙箱的强制规范
• 通过沙箱的promise模块处理脚本加载的异步状态，确保正确触发GTM的gtmOnSuccess和gtmOnFailure回调
• 直接为创建的script标签设置token属性，完全匹配像素的加载要求

内容的提问来源于stack exchange，提问作者epool