可扩展广告 - 在双击预览中从中途开始滑动动画
Expandable Ads - Slide animation starting half way through in double click preview
我正在使用 GWD 制作展开式广告。
当我在 chrome 本地预览广告时它工作正常，即当点击广告时它从顶部展开动画但是当我双击上传它并预览它时动画从中途开始并且不是从顶部。
如果你想在本地测试这个是代码：
<!DOCTYPE html>
<html>
<head>
<meta name="gwd:studio-creative-association" content="acct=30838629;adv=42607252;camp=42607436;cr=42607301;assets={42607303,};">
<meta charset="utf-8">
<meta name="generator" content="Google Web Designer 1.5.4.0113">
<meta name="template" content="Expandable 2.3.2">
<meta name="environment" content="gwd-doubleclick">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css" id="gwd-lightbox-style">
.gwd-lightbox {
overflow: hidden;
}
</style>
<style type="text/css" id="gwd-text-style">
p {
margin: 0px;
}
h1 {
margin: 0px;
}
h2 {
margin: 0px;
}
h3 {
margin: 0px;
}
</style>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.gwd-page-container {
position: relative;
width: 100%;
height: 100%;
}
.gwd-page-content {
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-style: preserve-3d;
position: absolute;
background-color: transparent;
}
.gwd-page-wrapper {
position: absolute;
transform: translateZ(0px);
background-color: rgb(255, 255, 255);
}
.banner {
width: 728px;
height: 90px;
}
.expanded {
width: 728px;
height: 400px;
}
.expand-button {
position: absolute;
width: 728px;
height: 90px;
left: 0px;
top: 0px;
}
.close-button {
position: absolute;
left: 0px;
top: 0px;
width: 728px;
height: 400px;
background-image: none;
background-color: rgba(153, 153, 153, 0.2);
}
.gwd-div-ehws {
position: absolute;
left: 0px;
top: 0px;
width: 728px;
height: 90px;
background-image: none;
background-color: rgb(197, 23, 23);
}
.gwd-div-1rbh {
position: absolute;
left: 0px;
top: 0px;
width: 728px;
height: 400px;
background-image: none;
background-color: rgb(9, 111, 214);
}
</style>
<link href="gwdpage_style.css" data-version="8" data-exports-type="gwd-page" rel="stylesheet">
<link href="gwddoubleclick_style.css" data-version="10" data-exports-type="gwd-doubleclick" rel="stylesheet">
<link href="gwdtaparea_style.css" data-version="4" data-exports-type="gwd-taparea" rel="stylesheet">
<link href="gwdpagedeck_style.css" data-version="8" data-exports-type="gwd-pagedeck" rel="stylesheet">
<script data-source="googbase_min.js" data-version="3" data-exports-type="googbase" type="text/javascript" src="googbase_min.js"></script>
<script data-source="gwd_webcomponents_min.js" data-version="4" data-exports-type="gwd_webcomponents" type="text/javascript" src="gwd_webcomponents_min.js"></script>
<script data-source="gwdpage_min.js" data-version="8" data-exports-type="gwd-page" type="text/javascript" src="gwdpage_min.js"></script>
<script data-source="gwdpagedeck_min.js" data-version="8" data-exports-type="gwd-pagedeck" type="text/javascript" src="gwdpagedeck_min.js"></script>
<script data-source="gwdtaparea_min.js" data-version="4" data-exports-type="gwd-taparea" type="text/javascript" src="gwdtaparea_min.js"></script>
<script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<script data-source="gwddoubleclick_min.js" data-version="10" data-exports-type="gwd-doubleclick" type="text/javascript" src="gwddoubleclick_min.js"></script>
<script type="text/javascript" gwd-events="support" src="gwd-events-support.1.0.js"></script>
</head>
<body class="document-body">
<gwd-doubleclick id="gwd-ad" polite-load="">
<gwd-metric-configuration>
<gwd-metric-event source="expand-button" event="tapareaexit" metric="" exit="Exit"></gwd-metric-event>
<gwd-metric-event source="close-button" event="tapareaexit" metric="" exit="Exit"></gwd-metric-event>
</gwd-metric-configuration>
<div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck" default-page="banner-page">
<div is="gwd-page" id="banner-page" data-gwd-name="Banner page" class="gwd-page-wrapper banner gwd-lightbox" data-gwd-width="728px" data-gwd-height="90px" style="">
<div class="gwd-page-content banner">
<div class="gwd-div-ehws"></div>
<gwd-taparea id="expand-button" class="expand-button"></gwd-taparea>
</div>
</div>
<div is="gwd-page" id="expanded-page" expanded="" data-gwd-name="Expanded page" class="gwd-page-wrapper expanded gwd-lightbox" data-gwd-width="728px" data-gwd-height="400px">
<div class="gwd-page-content expanded">
<div class="gwd-div-1rbh"></div>
<gwd-taparea id="close-button" class="close-button"></gwd-taparea>
</div>
</div>
</div>
</gwd-doubleclick>
<script type="text/javascript" gwd-events="registration">
// Support code for event handling in Google Web Designer
// This script block is auto-generated. Please do not edit!
gwd.actions.events.registerEventHandlers = function(event) {
gwd.actions.events.addHandler('expand-button', 'action', gwd.handleExpand_buttonAction, false);
gwd.actions.events.addHandler('close-button', 'action', gwd.handleClose_buttonAction, false);
gwd.actions.events.addHandler('close-button', 'action', gwd.handleClose_reportManualClose, false);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('expand-button', 'action', gwd.handleExpand_buttonAction, false);
gwd.actions.events.removeHandler('close-button', 'action', gwd.handleClose_buttonAction, false);
gwd.actions.events.removeHandler('close-button', 'action', gwd.handleClose_reportManualClose, false);
};
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>
<script type="text/javascript" gwd-events="handlers">
gwd.handleExpand_buttonAction = function() {
// GWD Predefined Function
gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'expanded-page', 'slide', 1000, 'linear', 'top');
};
gwd.handleClose_buttonAction = function() {
// GWD Predefined Function
gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'banner-page', 'slide', 1000, 'linear', 'bottom');
};
gwd.handleClose_reportManualClose = function() {
// GWD Predefined Function
gwd.actions.gwdDoubleclick.reportManualClose('gwd-ad');
};
</script>
<script type="text/javascript" id="gwd-init-code">
(function() {
var gwdAd = document.getElementById('gwd-ad');
/**
* Handles the DOMContentLoaded event. The DOMContentLoaded event is
* fired when the document has been completely loaded and parsed.
*/
function handleDomContentLoaded(event) {
}
/**
* Handles the WebComponentsReady event. This event is fired when all
* custom elements have been registered and upgraded.
*/
function handleWebComponentsReady(event) {
// Start the Ad lifecycle.
setTimeout(function() {
gwdAd.initAd();
}, 0);
}
/**
* Handles the event that is dispatched after the Ad has been
* initialized and before the default page of the Ad is shown.
*/
function handleAdInitialized(event) {}
window.addEventListener('DOMContentLoaded',
handleDomContentLoaded, false);
window.addEventListener('WebComponentsReady',
handleWebComponentsReady, false);
window.addEventListener('adinitialized',
handleAdInitialized, false);
})();
</script>
</body>
</html>
你没有做错任何事。
在 DCLK Studio 中测试您的代码后，我可以确认该错误的存在。广告发布并投放后，错误就不再可见。我将错误转发给 Studio Eng 团队（我在 GWD Eng 团队），他们会处理它。
同时，我建议继续将创意从工作室发布到 DCM（或 DBM）。
我正在使用 GWD 制作展开式广告。
当我在 chrome 本地预览广告时它工作正常，即当点击广告时它从顶部展开动画但是当我双击上传它并预览它时动画从中途开始并且不是从顶部。
如果你想在本地测试这个是代码：
<!DOCTYPE html>
<html>
<head>
<meta name="gwd:studio-creative-association" content="acct=30838629;adv=42607252;camp=42607436;cr=42607301;assets={42607303,};">
<meta charset="utf-8">
<meta name="generator" content="Google Web Designer 1.5.4.0113">
<meta name="template" content="Expandable 2.3.2">
<meta name="environment" content="gwd-doubleclick">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css" id="gwd-lightbox-style">
.gwd-lightbox {
overflow: hidden;
}
</style>
<style type="text/css" id="gwd-text-style">
p {
margin: 0px;
}
h1 {
margin: 0px;
}
h2 {
margin: 0px;
}
h3 {
margin: 0px;
}
</style>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.gwd-page-container {
position: relative;
width: 100%;
height: 100%;
}
.gwd-page-content {
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-style: preserve-3d;
position: absolute;
background-color: transparent;
}
.gwd-page-wrapper {
position: absolute;
transform: translateZ(0px);
background-color: rgb(255, 255, 255);
}
.banner {
width: 728px;
height: 90px;
}
.expanded {
width: 728px;
height: 400px;
}
.expand-button {
position: absolute;
width: 728px;
height: 90px;
left: 0px;
top: 0px;
}
.close-button {
position: absolute;
left: 0px;
top: 0px;
width: 728px;
height: 400px;
background-image: none;
background-color: rgba(153, 153, 153, 0.2);
}
.gwd-div-ehws {
position: absolute;
left: 0px;
top: 0px;
width: 728px;
height: 90px;
background-image: none;
background-color: rgb(197, 23, 23);
}
.gwd-div-1rbh {
position: absolute;
left: 0px;
top: 0px;
width: 728px;
height: 400px;
background-image: none;
background-color: rgb(9, 111, 214);
}
</style>
<link href="gwdpage_style.css" data-version="8" data-exports-type="gwd-page" rel="stylesheet">
<link href="gwddoubleclick_style.css" data-version="10" data-exports-type="gwd-doubleclick" rel="stylesheet">
<link href="gwdtaparea_style.css" data-version="4" data-exports-type="gwd-taparea" rel="stylesheet">
<link href="gwdpagedeck_style.css" data-version="8" data-exports-type="gwd-pagedeck" rel="stylesheet">
<script data-source="googbase_min.js" data-version="3" data-exports-type="googbase" type="text/javascript" src="googbase_min.js"></script>
<script data-source="gwd_webcomponents_min.js" data-version="4" data-exports-type="gwd_webcomponents" type="text/javascript" src="gwd_webcomponents_min.js"></script>
<script data-source="gwdpage_min.js" data-version="8" data-exports-type="gwd-page" type="text/javascript" src="gwdpage_min.js"></script>
<script data-source="gwdpagedeck_min.js" data-version="8" data-exports-type="gwd-pagedeck" type="text/javascript" src="gwdpagedeck_min.js"></script>
<script data-source="gwdtaparea_min.js" data-version="4" data-exports-type="gwd-taparea" type="text/javascript" src="gwdtaparea_min.js"></script>
<script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<script data-source="gwddoubleclick_min.js" data-version="10" data-exports-type="gwd-doubleclick" type="text/javascript" src="gwddoubleclick_min.js"></script>
<script type="text/javascript" gwd-events="support" src="gwd-events-support.1.0.js"></script>
</head>
<body class="document-body">
<gwd-doubleclick id="gwd-ad" polite-load="">
<gwd-metric-configuration>
<gwd-metric-event source="expand-button" event="tapareaexit" metric="" exit="Exit"></gwd-metric-event>
<gwd-metric-event source="close-button" event="tapareaexit" metric="" exit="Exit"></gwd-metric-event>
</gwd-metric-configuration>
<div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck" default-page="banner-page">
<div is="gwd-page" id="banner-page" data-gwd-name="Banner page" class="gwd-page-wrapper banner gwd-lightbox" data-gwd-width="728px" data-gwd-height="90px" style="">
<div class="gwd-page-content banner">
<div class="gwd-div-ehws"></div>
<gwd-taparea id="expand-button" class="expand-button"></gwd-taparea>
</div>
</div>
<div is="gwd-page" id="expanded-page" expanded="" data-gwd-name="Expanded page" class="gwd-page-wrapper expanded gwd-lightbox" data-gwd-width="728px" data-gwd-height="400px">
<div class="gwd-page-content expanded">
<div class="gwd-div-1rbh"></div>
<gwd-taparea id="close-button" class="close-button"></gwd-taparea>
</div>
</div>
</div>
</gwd-doubleclick>
<script type="text/javascript" gwd-events="registration">
// Support code for event handling in Google Web Designer
// This script block is auto-generated. Please do not edit!
gwd.actions.events.registerEventHandlers = function(event) {
gwd.actions.events.addHandler('expand-button', 'action', gwd.handleExpand_buttonAction, false);
gwd.actions.events.addHandler('close-button', 'action', gwd.handleClose_buttonAction, false);
gwd.actions.events.addHandler('close-button', 'action', gwd.handleClose_reportManualClose, false);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('expand-button', 'action', gwd.handleExpand_buttonAction, false);
gwd.actions.events.removeHandler('close-button', 'action', gwd.handleClose_buttonAction, false);
gwd.actions.events.removeHandler('close-button', 'action', gwd.handleClose_reportManualClose, false);
};
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>
<script type="text/javascript" gwd-events="handlers">
gwd.handleExpand_buttonAction = function() {
// GWD Predefined Function
gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'expanded-page', 'slide', 1000, 'linear', 'top');
};
gwd.handleClose_buttonAction = function() {
// GWD Predefined Function
gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'banner-page', 'slide', 1000, 'linear', 'bottom');
};
gwd.handleClose_reportManualClose = function() {
// GWD Predefined Function
gwd.actions.gwdDoubleclick.reportManualClose('gwd-ad');
};
</script>
<script type="text/javascript" id="gwd-init-code">
(function() {
var gwdAd = document.getElementById('gwd-ad');
/**
* Handles the DOMContentLoaded event. The DOMContentLoaded event is
* fired when the document has been completely loaded and parsed.
*/
function handleDomContentLoaded(event) {
}
/**
* Handles the WebComponentsReady event. This event is fired when all
* custom elements have been registered and upgraded.
*/
function handleWebComponentsReady(event) {
// Start the Ad lifecycle.
setTimeout(function() {
gwdAd.initAd();
}, 0);
}
/**
* Handles the event that is dispatched after the Ad has been
* initialized and before the default page of the Ad is shown.
*/
function handleAdInitialized(event) {}
window.addEventListener('DOMContentLoaded',
handleDomContentLoaded, false);
window.addEventListener('WebComponentsReady',
handleWebComponentsReady, false);
window.addEventListener('adinitialized',
handleAdInitialized, false);
})();
</script>
</body>
</html>
你没有做错任何事。
在 DCLK Studio 中测试您的代码后，我可以确认该错误的存在。广告发布并投放后，错误就不再可见。我将错误转发给 Studio Eng 团队（我在 GWD Eng 团队），他们会处理它。
同时，我建议继续将创意从工作室发布到 DCM（或 DBM）。