I've built a swipeable gallery unit in GWD but i'm having issues viewing the actual gallery images once it's published through DFP. It's fully functionable in preview mode but as soon as it gets published it won't work.
Here's a link to see the unit once published:
Any help would be great!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="Google Web Designer 1.6.0.0429">
<meta name="template" content="Banner 3.0.0">
<meta name="environment" content="gwd-doubleclick">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="gwdpage_style.css" rel="stylesheet" data-version="8" data-exports-type="gwd-page">
<link href="gwdpagedeck_style.css" rel="stylesheet" data-version="8" data-exports-type="gwd-pagedeck">
<link href="gwddoubleclick_style.css" rel="stylesheet" data-version="10" data-exports-type="gwd-doubleclick">
<link href="gwdimage_style.css" rel="stylesheet" data-version="7" data-exports-type="gwd-image">
<link href="gwdyoutube_style.css" rel="stylesheet" data-version="12" data-exports-type="gwd-youtube">
<link href="gwdgesture_style.css" rel="stylesheet" data-version="3" data-exports-type="gwd-gesture">
<link href="gwdgallerynavigation_style.css" rel="stylesheet" data-version="4" data-exports-type="gwd-gallerynavigation">
<link href="gwdswipegallery_style.css" rel="stylesheet" data-version="14" data-exports-type="gwd-swipegallery">
<link href="gwdtaparea_style.css" rel="stylesheet" data-version="4" data-exports-type="gwd-taparea">
<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);
}
.gwd-page-size {
width: 767px;
height: 768px;
}
.gwd-img-nkjb {
position: absolute;
width: 768px;
height: 533px;
left: 0px;
top: 0px;
}
.gwd-youtube-1iii {
position: absolute;
width: 697px;
height: 401px;
left: 37px;
top: 21px;
}
.gwd-swipegallery-1mx0 {
position: absolute;
top: 533px;
left: 0px;
width: 768px;
height: 239px;
}
.gwd-taparea-1d52 {
position: absolute;
width: 200px;
height: 140px;
left: 710px;
top: 578px;
}
.gwd-taparea-11o0 {
left: -150px;
top: 575px;
}
</style><script data-source="googbase_min.js" data-version="3" data-exports-type="googbase" src="googbase_min.js"></script><script data-source="gwd_webcomponents_min.js" data-version="5" data-exports-type="gwd_webcomponents" src="gwd_webcomponents_min.js"></script>
<script
data-source="gwdpage_min.js" data-version="8" data-exports-type="gwd-page" src="gwdpage_min.js"></script><script data-source="gwdpagedeck_min.js" data-version="8" data-exports-type="gwd-pagedeck" src="gwdpagedeck_min.js"></script><script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<script
data-source="gwddoubleclick_min.js" data-version="10" data-exports-type="gwd-doubleclick" src="gwddoubleclick_min.js"></script><script data-source="gwdimage_min.js" data-version="7" data-exports-type="gwd-image" src="gwdimage_min.js"></script><script data-source="gwdyoutube_min.js" data-version="12" data-exports-type="gwd-youtube" src="gwdyoutube_min.js"></script>
<script
data-source="gwdgesture_min.js" data-version="3" data-exports-type="gwd-gesture" src="gwdgesture_min.js"></script><script data-source="gwdgallerynavigation_min.js" data-version="4" data-exports-type="gwd-gallerynavigation" src="gwdgallerynavigation_min.js"></script><script data-source="gwdswipegallery_min.js" data-version="14" data-exports-type="gwd-swipegallery"
src="gwdswipegallery_min.js"></script><script data-source="gwdtaparea_min.js" data-version="4" data-exports-type="gwd-taparea" src="gwdtaparea_min.js"></script>
<script type="text/javascript" gwd-events="support" src="gwd-events-support.1.0.js"></script>
<script type="text/javascript" gwd-events="handlers">
gwd.auto_Gwd_taparea_1Action = function(event) {
// GWD Predefined Function
gwd.actions.gwdSwipegallery.goForwards('gwd-swipegallery_1');
};
gwd.auto_Gwd_taparea_2Action = function(event) {
// GWD Predefined Function
gwd.actions.gwdSwipegallery.goBackwards('gwd-swipegallery_1');
};
</script>
<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('gwd-taparea_1', 'action', gwd.auto_Gwd_taparea_1Action, false);
gwd.actions.events.addHandler('gwd-taparea_2', 'action', gwd.auto_Gwd_taparea_2Action, false);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('gwd-taparea_1', 'action', gwd.auto_Gwd_taparea_1Action, false);
gwd.actions.events.removeHandler('gwd-taparea_2', 'action', gwd.auto_Gwd_taparea_2Action, false);
};
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>
</head>
<body>
<gwd-doubleclick id="gwd-ad" polite-load="">
<gwd-metric-configuration>
<gwd-metric-event source="gwd-youtube_1" event="playpressed" metric="gwd-youtube_1: YouTube play"></gwd-metric-event>
<gwd-metric-event source="gwd-youtube_1" event="paused" metric="gwd-youtube_1: YouTube pause"></gwd-metric-event>
<gwd-metric-event source="gwd-youtube_1" event="ended" metric="gwd-youtube_1: YouTube end"></gwd-metric-event>
<gwd-metric-event source="gwd-youtube_1" event="replayed" metric="gwd-youtube_1: YouTube replayed"></gwd-metric-event>
<gwd-metric-event source="gwd-youtube_1" event="viewed25percent" metric="gwd-youtube_1: YouTube first quartile"></gwd-metric-event>
<gwd-metric-event source="gwd-youtube_1" event="viewed50percent" metric="gwd-youtube_1: YouTube midpoint"></gwd-metric-event>
<gwd-metric-event source="gwd-youtube_1" event="viewed75percent" metric="gwd-youtube_1: YouTube third quartile"></gwd-metric-event>
<gwd-metric-event source="gwd-youtube_1" event="viewed100percent" metric="gwd-youtube_1: YouTube complete"></gwd-metric-event>
<gwd-metric-event source="gwd-youtube_1" event="previewed0percent" metric="gwd-youtube_1: YouTube preview started"></gwd-metric-event>
<gwd-metric-event source="gwd-youtube_1" event="previewed25percent" metric="gwd-youtube_1: YouTube preview first quartile"></gwd-metric-event>
<gwd-metric-event source="gwd-youtube_1" event="previewed50percent" metric="gwd-youtube_1: YouTube preview midpoint"></gwd-metric-event>
<gwd-metric-event source="gwd-youtube_1" event="previewed75percent" metric="gwd-youtube_1: YouTube preview third quartile"></gwd-metric-event>
<gwd-metric-event source="gwd-youtube_1" event="previewed100percent" metric="gwd-youtube_1: YouTube preview complete"></gwd-metric-event>
<gwd-metric-event source="gwd-swipegallery_1" event="frametap" metric=""></gwd-metric-event>
<gwd-metric-event source="gwd-swipegallery_1" event="frameswipe" metric=""></gwd-metric-event>
<gwd-metric-event source="gwd-swipegallery_1" event="allframesviewed" metric="gwd-swipegallery_1: All Frames Viewed"></gwd-metric-event>
<gwd-metric-event source="gwd-swipegallery_1" event="firstinteraction" metric="gwd-swipegallery_1: Gallery Swiped"></gwd-metric-event>
<gwd-metric-event source="gwd-swipegallery_1" event="frameexit" metric="" exit="Gallery Frame Exited"></gwd-metric-event>
<gwd-metric-event source="gwd-taparea_1" event="tapareaexit" metric="" exit="Exit"></gwd-metric-event>
<gwd-metric-event source="gwd-taparea_2" event="tapareaexit" metric="" exit="Exit"></gwd-metric-event>
</gwd-metric-configuration>
<div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck">
<div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="767px" data-gwd-height="768px">
<div class="gwd-page-content gwd-page-size">
<gwd-youtube id="gwd-youtube_1" video-url="6DZ6RXHJDCY" class="gwd-youtube-1iii" autoplay="standard" controls="none" pause-on-end=""></gwd-youtube>
<img is="gwd-image" source="assets/Tablet Interstitial.png" id="gwd-image_1" class="gwd-img-nkjb">
<gwd-swipegallery id="gwd-swipegallery_1" scaling="contain" class="gwd-swipegallery-1mx0 gwd-gen-15yggwdanimation" images="assets/Article 3.jpg,assets/Article 2.jpg,assets/Article 1.jpg"></gwd-swipegallery>
<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-1d52"></gwd-taparea>
<gwd-taparea id="gwd-taparea_2" class="gwd-taparea-1d52 gwd-taparea-11o0"></gwd-taparea>
</div>
</div>
</div>
</gwd-doubleclick>
<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>
Thanks for your response and it's weird that it works on your end but on mine it won't show at all?
I'm using DFP to upload but i've just tried creating the ad in non generic and once I upload it using the html-to-dfp app it still won't show?
Any recommendations?
I've renamed the files and removed all spaces and re-published everything but i'm still having the issue. I was looking in the HTML code and I can actually see the images there which have uploaded but they still don't show on the unit. Could it be that maybe i'm doing something wrong when uploading?
Thanks,
Craig
Hi Jagdish,
Hope you’re well.
Looks like you are trying to preview the creative ID: 65806037985 on the webpage: www.india.com. To preview the creative using Preview→ On site, the targeting criteria in the ad slot should be similar to the targeting criteria of the line item settings. I see that line item ID:31343265 is targeted to Feature Phone/Smartphone/Desktop. So, I emulated the browser to a smart phone and used the On site preview option. I was able to see the creative render as intended. Here’s screenshot for your reference. In case I’ve misunderstood your question, please elaborate the issue along with the screenshots and I’ll be glad to investigate.
Also, letting you know that you can now contact DFP Support via “Live chat”. This option is available under “Contact Us” on the DFP Help-center at https://support.google.com/dfp_sb.
Best,
Please help what i do now.
Regards,
Vaibhav.