首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >可扩展广告-双击预览从一半开始的幻灯片动画

可扩展广告-双击预览从一半开始的幻灯片动画
EN

Stack Overflow用户
提问于 2016-04-17 09:48:13
回答 1查看 684关注 0票数 0

我正在使用GWD创建可扩展的广告。

当我预览的广告在铬本地,它工作良好,即当点击广告时,它扩大动画从顶部,但当我上传它的双击和预览它,动画开始从一半,而不是从顶部。

演示

如果您想在本地测试这一点,下面是代码:

代码语言:javascript
复制
<!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>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-04-18 16:27:55

你没做错什么。

在DCLK中测试代码之后,我可以确认错误的存在。一旦广告被发布和直播,这个bug就不再可见。我将错误转发给Studio团队(我在GWD Eng团队),他们会处理它。

同时,我建议继续把创意从工作室发布到DCM (或DBM)。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36674975

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档