在GTM自定义模板中是否可以获取DOM元素？如何实现指定DIV注入视频功能

解答 #

核心问题结论 #

GTM自定义标签可以调用DOM元素。该报错的触发原因是GTM自定义模板采用沙盒化的JavaScript运行环境，禁止直接访问全局window下的原生document对象，也不允许将这类全局内置对象加入权限列表，因此直接通过copyFromWindow()、callInWindow()调用全局document的操作会触发规则拦截。

需求实现方案 #

无需手动获取全局document，直接使用GTM自定义模板内置的封装DOM能力即可完成开发，具体操作步骤如下：

1. 进入自定义模板的**权限（Permissions）**配置页，开启「Access DOM」权限，该权限已封装官方认可的DOM操作能力，无需额外申请全局对象访问权限。
2. 在模板的配置字段页，新增两个文本输入参数：
   • 目标元素ID：供运营人员填写要注入视频的div的id属性值
   • 视频URL：供运营人员填写视频资源地址
3. 在模板代码编辑区写入对应逻辑，示例代码如下：

// 读取配置的参数
const targetId = data.target_id
const videoUrl = data.video_url

// 非空校验
if (!targetId || !videoUrl) return

// 获取目标容器元素
const targetContainer = document.getElementById(targetId)
if (!targetContainer) return

// 创建视频元素，可根据业务需求自定义属性
const videoElement = document.createElement('video')
videoElement.src = videoUrl
videoElement.controls = true
videoElement.style.width = '100%'

// 将视频注入目标容器
targetContainer.appendChild(videoElement)

若需要嵌入第三方平台的iframe形式视频，仅需将创建video元素的逻辑替换为创建iframe元素，操作逻辑完全一致。

内容的提问来源于stack exchange，提问作者Cédric Bloem