展开式广告-幻灯片动画从双击预览开始进行到一半 [英] Expandable Ads - Slide animation starting half way through in double click preview
本文介绍了展开式广告-幻灯片动画从双击预览开始进行到一半的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用GWD来制作展开式广告。
I am using GWD to create expandable ad.
当我在chrome中本地预览广告时，效果很好，即单击广告时，它会从顶部展开动画，但当我双击上传并预览它时，动画从一半开始而不是从顶部开始。
When I preview the Ad in chrome locally it works fine i.e when clicking the ad it expands animating from the top but when I upload it in double click and preview it the animation starts from half way through and not from the top.
DEMO
如果您愿意要在本地进行测试，请使用以下代码：
If you wish to test this on local here is the code:
<!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团队中），他们将负责解决此问题。
After testing your code in DCLK Studio I can confirm the existence of the bug. Once the ads is published and live, the bug is no longer visible. I forward the bug to the Studio Eng team (I'm in the GWD Eng team) and they will take care of it.
同时，我建议您继续进行并将广告素材从工作室发布到DCM（或DBM）。
Meanwhile I'd advice to go ahead and publish the creative from studio to DCM (or DBM).
这篇关于展开式广告-幻灯片动画从双击预览开始进行到一半的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
