0
Ich verwende GWD, um erweiterbare Anzeige zu erstellen.Expandable Ads - Slide-Animation startet in der Mitte in Doppelklick Vorschau
Wenn ich die Anzeige in Chrome lokal Vorschau es funktioniert gut, d. H. Beim Klicken auf die Anzeige wird Animation von oben erweitert, aber wenn ich es hochladen mit Doppelklick und Vorschau es beginnt die Animation von halb durch und nicht von oben.
Wenn Sie diese hier auf lokalen zu testen, ist der 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>
Dankeschön Snick - Nur eine weitere Sache, die ich nicht verstehen kann, ist die Abschlussanimation. Auf DCLK Studio springt es (nicht einmal die Hälfte der Animation wird angezeigt) & auf dem lokalen animiert es von der Unterseite der Seite und kollabiert dann plötzlich - Sie können dies im aktuell geteilten Code sehen. –