使用 Google Web Designer 制作展开式广告素材

展开式广告最初的尺寸与它们所投放到的广告位相同。然后，在发生用户互动（例如，通过点击某个按钮）时，这种广告的尺寸会扩大（大于广告位）并展示更多内容。要在 Google Web Designer 中制作展开式广告，可以从空白文件开始从头制作，也可打开预先制作好的展开式广告模板，然后添加您自己的文案、图片，等等。

从头开始

第 1 步：创建新文件

要在 Google Web Designer 中新建带有视频广告素材的展开式广告，请执行以下操作：

1. 打开 Google Web Designer，然后依次点击文件 > 新文件。系统将显示“创建新的空白文件”窗口。
2. 在“广告”列表中，选择展开式广告。
3. 选择 Display & Video 360 作为环境。
4. 设置广告展开前和展开后的尺寸。
5. 为广告素材命名。这是 HTML 文件的名称。
6. 选择 Google Web Designer 文件在计算机上的保存位置。输入相应位置的路径，或者点击搜索图标导航到您想要的位置。
7. 设置动画模式：
   1. 快速：按场景为广告添加动画效果。请参阅 Google Web Designer 帮助中心的在“快速”模式下创建动画，以获取更多信息。
   2. 高级：在元素各自的时间轴上为各个元素添加动画效果。请参阅 Google Web Designer 帮助中心的在“高级”模式下创建动画，以获取更多信息。
8. 点击确定。

Google Web Designer 会创建初始的展开前和展开后页面（称为横幅页面和展开后页面)。它会向展开前页面自动添加用于展开广告的“点按区域事件”，并向展开后页面添加用于合拢广告的“关闭点按区域”。广告与广告服务器进行通信以及收集跟踪指标所需的原始代码也将自动添加。

第 2 步：设置横幅页面

要在横幅页面中设置展开前广告，请执行以下操作：

1. 将图片拖到场景中，或从素材资源库面板上拖到场景中，以导入图片。
2. （可选）创建动画，或者向页面添加内置组件或自定义组件。
3. 当横幅完成后，选择“点按区域”组件，然后点击“置顶”按钮。
4. 保存。

要将广告素材设置成在鼠标悬停时展开，请执行以下操作：

1. 打开“事件”面板，点击 + 按钮以添加鼠标悬停事件。
2. 选择 expand-button 作为目标。
3. 选择鼠标 > 鼠标悬停作为事件。
4. 选择 Google 广告 > 转到页面作为操作。
5. 选择 gwd-ad 作为接收器。

详细了解如何在 Google Web Designer 中使用事件

第 3 步：设置展开后页面

1. 使用场景底部的页面指示器 切换到展开后页面。
2. 将图片拖到场景中，或从素材资源库面板上拖到场景中，以导入图片。
3. （可选）创建动画，或者向页面添加内置组件或自定义组件。
4. 保存。

添加号召性用语

1. 确保广告上有按钮或其他非常醒目的号召性用语元素，以供用户点击或触摸。
2. 将“点按区域”组件从“组件”面板的“互动”文件夹拖到场景中，并使其覆盖在号召性用语上。
3. 在“事件”面板中点击用于创建新事件的按钮 。
4. 在“事件”对话框中选择以下选项：

   目标	“点按区域”组件 (gwd-taparea_1)
   事件	点按区域 > 触摸/点击
   操作	Google 广告 > 退出广告 注意：如果您执行退出广告（覆盖网址）这项类似操作，将无法在广告素材以外（例如在 Studio 或 Campaign Manager 360 中）修改网址，该操作应仅用于动态广告。
   接收方	gwd-ad
   配置	指标 ID - 一个可使报告更易于理解的标签（例如“CTA”）。 网址 - 退出网址。 退出时合拢 - 对于展开式广告，若选中此项，当用户关闭广告时，系统即会合拢广告。 退出时暂停媒体 - 若选中此项，当用户关闭广告时，系统即会停止播放视频和音频。 退出时的展开前页面 - 对于展开式广告，这是指用户关闭广告时系统会显示的页面。

   

（可选）添加视频

如果您想要向广告素材添加视频，请使用“视频”组件或“YouTube”组件。如果您的视频托管在 YouTube 上，请使用“YouTube”组件。如果没有，请为以下兼容的 HTML5 视频格式使用“视频”组件：

• .MP4
• .OGG/.OGV
• .WEBM

从模板开始

模板是采用热门样式和功能预先制成的广告，具有各种常用的尺寸。通过替换模板中的图片和其他素材资源，您可以非常快速地制作一个实用的有效广告。

第 1 步：通过模板创建新文件

1. 从“文件”菜单中选择通过模板新建…。系统即会打开模板库。
2. 要找到 Google Marketing Platform 横幅广告模板，请按以下步骤操作：
   1. 点击“搜索”图标 。
   2. 展开“广告类型”部分，然后选择展开式。 
   3. 展开“平台”部分，然后选择 Display & Video 360。
   4. 关闭过滤器面板。系统会显示兼容布局的列表。
3. 点击与所需布局对应的使用布局。
4. 如果有多个尺寸选项，请选择所需的尺寸。
5. 为您的新文件命名（必填）。
6. （可选）更改该文件的保存位置。您可以输入相应位置的路径，也可以通过点击文件夹图标 导航到您想使用的位置。
7. 点击创建。

第 2 步：在模板中添加图片或替换其中的图片

Google Web Designer 的展开式广告模板包含一个横幅页面（即展开前广告）和一个展开后页面（即展开后广告）。默认情况下，您在创建新文件时会看到横幅页面。使用场景底部的页面指示器 切换到“展开后页面”。

每个页面中的各个元素都有对应的占位符素材资源和描述性 ID。首先，将每个常规占位符素材资源替换为想在您广告中使用的相应素材资源。通过模板制作的广告是完全可修改的；若想制作一个更为个性化的广告，您可以随意添加或删除素材资源、组件和事件。

借助“更换图片”功能，您可以使用素材资源库中的图片或您上传的图片来替换原有图片。当您要替换模板中的图库图片时，这一功能尤为有用。

要替换通过模板制作的广告中的图片，请执行以下操作：

1. 右键点击您要替换的图片。
2. 从弹出式菜单中选择更换图片…。
3. 在对话框中，您可从素材资源库中选择一张图片，也可通过点击“添加”按钮 从您的计算机中选择一张图片。
4. 点击确定。

预览制作好的广告素材

要通过 Google Web Designer 预览广告，请执行以下操作：

1. 点击屏幕底部的预览按钮 。Google Web Designer 会识别您系统上的受支持浏览器，并让您选择想要使用的浏览器。
2. 要选择您希望用于预览的浏览器，请点击预览按钮右侧的选择箭头，然后从列表中选择相应浏览器。
3. 在页面加载时，查看展开前广告。
4. 点击号召性用语以查看广告展开情况。

（可选）设置多向展开式广告素材

多向展开式广告素材可以根据它们在网站上的展示位置向合适方向展开。要制作多向展开式广告素材，请按以下步骤操作。

为节省时间，请在 Google Web Designer 中使用多向展开式广告素材模板。该模板中包含下列步骤中的大量代码和设置。

多向设置

第 1 步：增加场景尺寸

1. 增加展开后页面的大小，以便在每个方向上为展开后区域留出足够空间。

   例如，如果展开前广告素材的尺寸为 300x250、展开后广告素材的尺寸为 600x250，并且广告素材可以向左或向右展开，那么请将展开后页面的尺寸设置为 900x250。
   
   

2. 使用页面指示器切换回横幅页面 。
3. 点击广告展开视图按钮 。
4. 重新放置展开式广告的可见区域，使展开前广告素材位于中心位置。您可以在 Google Web Designer 帮助中心内详细了解如何使用广告展开视图按钮。
5. 使用场景底部的页面指示器 切换到展开后页面。
6. 调整广告素材元素的位置，使其与新的场景尺寸相匹配。

第 2 步：添加定位代码

1. 点击代码视图。
2. 向下滚动到 ID 为 gwd-init-code 的脚本代码：
   <script type="text/javascript" id="gwd-init-code">
3. 添加启用多向展开功能的代码，并添加事件处理代码。请参阅 Studio HTML5 SDK，了解 API 方法和示例。

   示例代码

   此示例仅能向左和向右展开。您可以查看 Studio HTML5 SDK 了解更多详细信息。

   Enabler.setIsMultiDirectional(true);
   
   // 根据展开方向修改元素的位置。
   function expandStartHandler() {
     var direction = Enabler.getExpandDirection().toString();
     if (direction == 'tr' || direction == 'br') {
       // 在此处添加代码，确定元素在向右展开时的位置。
       // 更改 btnClose 以匹配关闭按钮的 ID，然后修改位置。
       btnClose.style.left = '875px';
     } else {
       // 在此处添加代码，确定元素在向左展开时的位置。
       // 更改 btnClose 以匹配关闭按钮的 ID，然后修改位置。
       btnClose.style.left = '10px';
     }
   }
   
   Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START, expandStartHandler);

4. 添加代码，以便针对您希望支持的每个展开方向定位每个广告素材元素。

广告素材制作完成后，您便可以将其发布到 Studio。