要使广告素材具有动态性，您需要将一系列不同的内容选项（通常存储在一个电子表格中）与广告素材中用于存放文字、图片或视频的容器关联起来。这些容器大多是 div 或其他 HTML 元素。
您还可以将电子表格中的其他信息传递到广告素材中的一个用于控制广告素材外观的变量中。例如，可以将三种颜色主题（蓝、绿和紫）存储在电子表格中，然后使用动态模式配置中设置的规则来为具体受众群体选择其中一种主题。广告投放时，规则会将其中一种颜色主题传递到广告素材，然后广告素材的代码就会显示与该颜色主题匹配的广告素材内容。
准备工作
您首先需要设计基本的广告素材结构，规划好标题文案、图片及构成广告的其他设计元素，然后才能将动态数据与广告素材关联起来。
如果您没有使用 Google Web Designer，您的广告素材中应包含 Studio 启动器，并且应该已经添加了所需的代码来跟踪退出次数、计数器或计时器。如需了解详情，请遵循我们的制作指南。
下文中的步骤会为您详细讲解如何使用其他 HTML 编辑软件来制作广告素材。
决定哪些广告素材元素具有动态性
在广告素材的概念设计阶段，您应确定自己打算动态替换广告中的多少、哪些元素。这些元素（也称为动态元素）通常包括但不限于：
- 文字
- 图片
- 退出网址
- 视频
创建动态映射关系图
为了更直观地呈现 Feed 内容对广告素材中的哪些元素有影响，您可以创建一个动态映射关系图。动态映射关系图是一种广告模型图，可以清楚地标明哪些元素是动态元素。例如，在下方的动态映射关系图中，您可以看到以下动态元素：标题文字、产品图片、号召性用语 (CTA) 和优惠文案。侧面还附有实用的注释。
第 1 步：从 Studio 中粘贴设置代码
在 Studio 中设置好配置文件后，您必须将该配置文件与 HTML5 广告素材相关联，才能实现动态功能。为此，请从 Studio 中“动态内容”标签的第 4 步：生成代码中复制设置代码。选择 HTML5 按钮，然后将生成的 HTML5 代码复制并粘贴到广告素材中。
下面的 JavaScript 代码示例可以嵌入 HTML 文件，也可以放入一个单独的 JS 文件中。
“第 4 步：生成代码”中的设置代码示例<!-- DynamicContent 启动：HTML5 调用代码。-->// 动态内容变量和示例值Enabler.setProfileId(12345);var devDynamicContent = {};devDynamicContent.SampleElement = [{}];devDynamicContent.SampleElement[0]._id = 0;devDynamicContent.SampleElement[0].headline = "Some headline";devDynamicContent.SampleElement[0].image_url = {};devDynamicContent.SampleElement[0].image_url.Url ="http://yourServer/sample.jpg";devDynamicContent.SampleElement[0].landing_url = {};devDynamicContent.SampleElement[0].landing_url.Url ="http://www.yoursite.com";Enabler.setDevDynamicContent(devDynamicContent);
<!--
* 在 Studio 启动器初始化之后，
* 您可以通过以下方式访问变量：
* var price = dynamicContent.Product[0].price;
* 注意：请务必使用“dynamicContent”，而不是“devDynamicContent”
-->
第 2 步：关联动态数据
添加代码，将动态数据与广告素材中的某个元素（如文字、图片和退出网址）相关联。请务必在启动器初始化之后再添加代码。
在编写用于获取动态数据的代码时，请使用 dynamicContent 而非 devDynamicContent（如上文的设置代码以及下面的示例中所示）。
示例：设置动态文字
document.getElementById('headline').innerHTML =
dynamicContent.SampleElement[0].headline;
示例：设置动态图片
document.getElementById('background').src =
dynamicContent.SampleElement[0].image_url.Url
示例：设置动态点击后到达网址
document.getElementById('cta').addEventListener('click', ctaHandler);
function ctaHandler() {
Enabler.exitOverride(
"yourExitID",
dynamicContent.SampleElement[0].landing_url.Url);
}
示例：
var data = {};
data.headline = dynamicContent.SampleElement[0].headline;
然后在您的代码中引用：
document.getElementById('headline').innerHTML = data.headline;
第 3 步：测试不同的动态值
您应该先对动态内容的各种可取值进行测试，然后再将广告素材上传到 Studio。在 Feed 中查找各种不同的值进行测试；例如，动态图片的不同网址，或文字的不同字符串，尤其是诸如超长（或超短）文字之类的极端情况。将每个值插入广告素材的设置代码中，并预览结果。这样，您便能够在质量检查之前提前发现问题。
此外，您可能需要修改设置代码中的值，以便能明确知道它们是否是开发值：
<!-- DynamicContent 启动：HTML5 调用代码。-->
// 动态内容变量和示例值
// …
devDynamicContent.SampleElement[0].headline = "Default headline";
这样做的好处是，如果广告素材使用的不是“真正的”动态数据，而是设置代码中的开发值，则当通过动态预览功能（或实际代码）查看广告素材时，就可以明确知道这些是开发值。