Expandable Ads - Slide animation starting half way

2019-09-19 01:56发布

问题:

I am using GWD to create expandable ad.

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>

回答1:

You are not doing anything wrong.

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.

Meanwhile I'd advice to go ahead and publish the creative from studio to DCM (or DBM).