代码模式

Engage组件中的创意设置除了使用模板设置、系统提供的可视化编辑设置，还为具有一定前端技术经验的创意者提供了代码模式，支持用户自己编码，利用HTML、CSS、JavaScript写成更加丰富多彩的Engage组件内容。

进入代码模式的两种方法 #

1.在创意编辑页面中点击右上角”代码模式”可以进入代码编辑页面

2.选择创意模板时直接选择【代码模式】的模板。

代码模式界面图

该模式下的几点注意事项 #

通过点击创意中右上角代码模式按钮进入代码模式，在这里可以编辑您的HTML和CSS，但是需要注意的一点是从代码模式回滚至可视化模式将会导致代码模式下的编辑内容丢失。

如果需要添加js脚本来修改页面元素或向页面中插入一些判断逻辑，需要在HTML下添加<script></script>标签，标签里编写需要处理逻辑。这里需要注意的是如果在windows作用域下需要使用Engage组件代码模式里的变量时，需要将代码模式下的变量声名为全局变量。因为这些script标签内的Javascript代码在渲染时会放到函数中运行，所以定义的变量会变成局部变量。例如

<script> 

window.pt_engage_id = function(){ 

  return "engageId..."; 

} 

</script> 

Engage组件上的按钮、图片等元素的点击、关闭数据的采集是根据预先定义的属性来实现的。如果您在代码模式下新增删改了按钮元素并且也想正常采集这部分数据，建议您参考 代码模式下数据监测方法

在代码模式中手动引用第三方库，比如Jquery等，有可能影响Engage组件的功能和渲染速度。我们不建议您在代码模式中引用第三方库。

如果您使用JavaScript修改页面元素，页面元素的变化过程可能会被客户感知从而影响体验。因为Engage的加载时机是等待页面渲染完成之后才会开始，也就会造成某个页面元素展示完之后又将其修改。如果元素是在首屏，受网页加载速度的影响，这种变化是可能会影响访客的体验。最好还是避免修改首屏的元素。