Stop banner after 30 seconds

642 views
Skip to first unread message

Ignacio López Aguirre de Cárcer

unread,
Feb 1, 2016, 7:03:31 AM2/1/16
to Google Web Designer beta
Hi colleagues,

I'm doing a banner with two frames which have got a recursive link to another frame and vice versa.

How I can stop the banner in the second frame after 30 seconds?

This is the code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="generator" content="Google Web Designer 1.5.4.0113">
  <meta data-template-name="gwd-300x250_BANNER_SUPER">
  <meta name="template" content="Banner 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">
    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: 300px;
      height: 250px;
    }
    .gwd-page-wrapper {}.gwd-page-wrapper {}.gwd-page-wrapper {}[data-gwd-group="LOGO"] .gwd-grp-qagq.gwd-canvas-hot0 {
      position: absolute;
      width: 300px;
      height: 45px;
      left: 0px;
      transform-style: preserve-3d;
      top: 0px;
      transform: translate3d(0px, 0px, 0px);
    }
    [data-gwd-group="LOGO"] .gwd-grp-qagq.gwd-img-1o5k {
      position: absolute;
      left: 56px;
      top: 58px;
      width: 150px;
      height: 18.22px;
      transform: translate3d(19px, -3px, 0px);
      transform-style: preserve-3d;
      opacity: 0;
    }
    [data-gwd-group="LOGO"] .gwd-grp-qagq.gwd-img-33fp {
      position: absolute;
      left: 115px;
      top: 83px;
      width: 70px;
      height: 39.29px;
      transform-style: preserve-3d;
      opacity: 0;
      transform: translate3d(0px, -9px, 0px);
    }
    [data-gwd-group="LOGO"] {
      width: 300px;
      height: 113.281px;
    }
    .gwd-div-1v21 {
      position: absolute;
      left: 0px;
      top: -47px;
    }
    .gwd-play-animation [data-gwd-group="LOGO"] .gwd-gen-16jcgwdanimation {
      animation: gwd-gen-16jcgwdanimation_gwd-keyframes 0.6s linear 0s 1 normal forwards;
    }
    @keyframes gwd-gen-apeegwdanimation_gwd-keyframes {
      0% {
        opacity: 0;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        animation-timing-function: linear;
      }
    }
    .gwd-play-animation [data-gwd-group="LOGO"] .gwd-gen-apeegwdanimation {
      animation: gwd-gen-apeegwdanimation_gwd-keyframes 0.4s linear 0.6s 1 normal forwards;
    }
    .gwd-play-animation [data-gwd-group="LOGO"] .gwd-gen-e8a7gwdanimation {
      animation: gwd-gen-e8a7gwdanimation_gwd-keyframes 0.4s linear 0.6s 1 normal forwards;
    }
    .gwd-page-wrapper {}@keyframes gwd-empty-animation {
      0% {
        opacity: 0.001;
      }
      100% {
        opacity: 0;
      }
    }
    @keyframes gwd-empty-animation-PASO_INCIO {
      0% {
        opacity: 0.001;
      }
      100% {
        opacity: 0;
      }
    }
    .gwd-page-wrapper {}.gwd-page-wrapper {}@keyframes gwd-empty-animation-PASO_4 {
      0% {
        opacity: 0.001;
      }
      100% {
        opacity: 0;
      }
    }
    @keyframes gwd-empty-animation-PASO_FRAME_3 {
      0% {
        opacity: 0.001;
      }
      100% {
        opacity: 0;
      }
    }
    .gwd-page-wrapper {}@keyframes gwd-empty-animation-PASO_INICIO {
      0% {
        opacity: 0.001;
      }
      100% {
        opacity: 0;
      }
    }
    .gwd-div-5mmz {
      background-image: none;
      background-color: rgb(145, 132, 190);
    }
    .gwd-taparea-1jxh {
      position: absolute;
      transform-style: preserve-3d;
      left: 1px;
      top: 0px;
      width: 299px;
      height: 250px;
      transform-origin: 149.5px 125px 0px;
    }
    .gwd-page-wrapper {
      background-image: none;
    }
    #page1.gwd-play-animation .event-1-animation {
      animation: gwd-empty-animation 2.5s linear 0s 1 normal forwards;
    }
    @keyframes gwd-gen-16jcgwdanimation_gwd-keyframes {
      0% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: linear;
      }
      100% {
        transform: translate3d(0px, 48px, 0px);
        animation-timing-function: linear;
      }
    }
    @keyframes gwd-gen-e8a7gwdanimation_gwd-keyframes {
      0% {
        opacity: 0;
        transform: translate3d(0px, -9px, 0px);
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        transform: translate3d(0px, -9px, 0px);
        animation-timing-function: linear;
      }
    }
    .gwd-div-1bzl {
      position: absolute;
      left: 0px;
      top: 1px;
    }
    [data-gwd-group="LOGOESTATICO"] .gwd-grp-1ted.gwd-canvas-hot0 {
      position: absolute;
      width: 300px;
      height: 45px;
      left: 0px;
      transform-style: preserve-3d;
      transform: translate3d(0px, 48px, 0px);
      top: -48px;
    }
    [data-gwd-group="LOGOESTATICO"] .gwd-grp-1ted.gwd-img-1o5k {
      position: absolute;
      left: 56px;
      width: 150px;
      height: 18.22px;
      transform: translate3d(19px, -3px, 0px);
      transform-style: preserve-3d;
      opacity: 1;
      top: 10px;
    }
    [data-gwd-group="LOGOESTATICO"] .gwd-grp-1ted.gwd-img-33fp {
      position: absolute;
      left: 115px;
      width: 70px;
      height: 39.29px;
      transform-style: preserve-3d;
      opacity: 1;
      transform: translate3d(0px, -9px, 0px);
      top: 35px;
    }
    [data-gwd-group="LOGOESTATICO"] {
      width: 300px;
      height: 65.2812px;
    }
    .gwd-div-mslk {
      background-image: none;
      background-color: rgb(255, 255, 255);
    }
    .gwd-div-16kr {
      background-image: none;
      background-color: rgb(255, 255, 255);
    }
    .gwd-taparea-1khc {
      left: 1px;
      top: 0px;
      background-image: none;
    }
    .gwd-taparea-kgzh {
      background-image: none;
    }
    .gwd-img-k1j6 {
      position: absolute;
      width: 164px;
      height: 183px;
      left: 71px;
      top: 59px;
      opacity: 0;
    }
    .gwd-img-1gl8 {
      position: absolute;
      width: 22px;
      height: 205px;
      left: -1px;
      top: 20px;
      opacity: 1;
    }
    .gwd-img-mmk1 {
      position: absolute;
      width: 130px;
      height: 82px;
      left: 32px;
      top: 121px;
      opacity: 0;
    }
    .gwd-img-b9sm {
      position: absolute;
      width: 22px;
      height: 205px;
      left: -1px;
      top: 20px;
      opacity: 1;
    }
    .gwd-img-1v7n {
      position: absolute;
      width: 121px;
      height: 130px;
      left: 168px;
      top: 75px;
      opacity: 0;
    }
    .gwd-img-1re7 {
      position: absolute;
      width: 77px;
      height: 76px;
      left: 32px;
      top: 57px;
      opacity: 0;
    }
    .gwd-img-1r3q {
      position: absolute;
      width: 300px;
      height: 39px;
      left: 0px;
      top: 211px;
      opacity: 0;
    }
    @keyframes gwd-gen-1boggwdanimation_gwd-keyframes {
      0% {
        opacity: 0;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        animation-timing-function: linear;
      }
    }
    @keyframes gwd-gen-e1ntgwdanimation_gwd-keyframes {
      0% {
        opacity: 0;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        animation-timing-function: linear;
      }
    }
    @keyframes gwd-gen-1x4igwdanimation_gwd-keyframes {
      0% {
        opacity: 0;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        animation-timing-function: linear;
      }
    }
    .gwd-img-2qf4 {
      position: absolute;
      width: 300px;
      height: 250px;
      top: 0px;
      left: 0px;
    }
    .gwd-img-1o6n {
      position: absolute;
      width: 300px;
      height: 250px;
      left: 0px;
      top: 0px;
    }
    #page1_1.gwd-play-animation .event-2-animation {
      animation: gwd-empty-animation 4s linear 0s 1 normal forwards;
    }
    #page1_1.gwd-play-animation .gwd-gen-1vr9gwdanimation {
      animation: gwd-gen-1vr9gwdanimation_gwd-keyframes 4s linear 0s 1 normal forwards;
    }
    #page1_1.gwd-play-animation .gwd-gen-1boggwdanimation {
      animation: gwd-gen-1boggwdanimation_gwd-keyframes 0.5s linear 0s 1 normal forwards;
    }
    #page1_1.gwd-play-animation .gwd-gen-e1ntgwdanimation {
      animation: gwd-gen-e1ntgwdanimation_gwd-keyframes 0.5s linear 0.5s 1 normal forwards;
    }
    #page1_1.gwd-play-animation .gwd-gen-1x4igwdanimation {
      animation: gwd-gen-1x4igwdanimation_gwd-keyframes 0.5s linear 1s 1 normal forwards;
    }
    @keyframes gwd-gen-l7pggwdanimation_gwd-keyframes {
      0% {
        opacity: 0;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        animation-timing-function: linear;
      }
    }
    @keyframes gwd-gen-1vr9gwdanimation_gwd-keyframes {
      0% {
        opacity: 0;
        animation-timing-function: linear;
      }
      12.5% {
        opacity: 1;
        animation-timing-function: linear;
      }
      25% {
        opacity: 0;
        animation-timing-function: linear;
      }
      37.5% {
        opacity: 1;
        animation-timing-function: linear;
      }
      50% {
        opacity: 0;
        animation-timing-function: linear;
      }
      62.5% {
        opacity: 1;
        animation-timing-function: linear;
      }
      75% {
        opacity: 0;
        animation-timing-function: linear;
      }
      87.5% {
        opacity: 1;
        animation-timing-function: linear;
      }
      100% {
        opacity: 0;
        animation-timing-function: linear;
      }
    }
    #page1_1.gwd-play-animation .gwd-gen-1i3ugwdanimation {
      animation: gwd-gen-1i3ugwdanimation_gwd-keyframes 2s linear 0s 1 normal forwards;
    }
    @keyframes gwd-gen-1i3ugwdanimation_gwd-keyframes {
      0% {
        opacity: 1;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        animation-timing-function: linear;
      }
    }
    #page1.gwd-play-animation .gwd-gen-l7pggwdanimation {
      animation: gwd-gen-l7pggwdanimation_gwd-keyframes 1s linear 0s 1 normal forwards;
    }
    @keyframes gwd-gen-1gefgwdanimation_gwd-keyframes {
      0% {
        opacity: 1;
        animation-timing-function: linear;
      }
      60% {
        opacity: 1;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        animation-timing-function: linear;
      }
    }
    #page1.gwd-play-animation .gwd-gen-1gefgwdanimation {
      animation: gwd-gen-1gefgwdanimation_gwd-keyframes 2.5s linear 0s 1 normal forwards;
    }
  </style>
  <link href="gwdpage_style.css" data-version="8" data-exports-type="gwd-page" rel="stylesheet">
  <link href="gwdtaparea_style.css" data-version="4" data-exports-type="gwd-taparea" rel="stylesheet">
  <link href="gwdimage_style.css" data-version="7" data-exports-type="gwd-image" rel="stylesheet">
  <link href="gwddoubleclick_style.css" data-version="10" data-exports-type="gwd-doubleclick" rel="stylesheet">
  <link href="gwdpagedeck_style.css" data-version="8" data-exports-type="gwd-pagedeck" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css">
  <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="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 data-source="gwdimage_min.js" data-version="7" data-exports-type="gwd-image" type="text/javascript" src="gwdimage_min.js"></script>
  <script data-source="gwdrectangle_min.js" data-version="3" data-exports-type="gwd-rectangle" type="text/javascript" src="gwdrectangle_min.js"></script>
  <script type="text/javascript" src="groups_runtime.min.1.0.js" gwd-groups-version="1.0"></script>
  <script type="text/javascript" src="gwdid.min.1.0.js" gwd-gwdid-version="1.0"></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.gwdDoubleclick.exit('gwd-ad', 'GENERAL ', 'http://www.elcorteingles.es/supermercado/sm2/catalog.jsp?_requestid=637559', true, true);
    };
    gwd.auto_Page1Event_1 = function(event) {
      // GWD Predefined Function
      gwd.actions.gwdPagedeck.goToPage('pagedeck', 'page1_1', 'fade', 500, 'linear', 'top');
    };
    gwd.auto_Page1_1Event_2 = function(event) {
      // GWD Predefined Function
      gwd.actions.gwdPagedeck.goToPage('pagedeck', 'page1', 'fade', 500, 'linear', 'top');
    };
    gwd.auto_Gwd_taparea_2Action = function(event) {
      // GWD Predefined Function
      gwd.actions.gwdDoubleclick.exit('gwd-ad', 'GENERAL', 'http://www.elcorteingles.es/supermercado/sm2/catalog.jsp?_requestid=637559', true, true);
    };
  </script>
  <script type="text/javascript" gwd-events="registration">
    // Código de soporte para la administración de eventos en Google Web Designer
     // Este bloqueo de la secuencia de comandos se genera automáticamente. No lo edite.
    gwd.actions.events.registerEventHandlers = function(event) {
      gwd.actions.events.addHandler('gwd-taparea_1', 'action', gwd.auto_Gwd_taparea_1Action, false);
      gwd.actions.events.addHandler('page1', 'event-1', gwd.auto_Page1Event_1, false);
      gwd.actions.events.addHandler('page1_1', 'event-2', gwd.auto_Page1_1Event_2, false);
      gwd.actions.events.addHandler('gwd-taparea_2', 'action', gwd.auto_Gwd_taparea_2Action, false);
      gwd.actions.timeline.captureAnimationEnd(document.body);
    };
    gwd.actions.events.deregisterEventHandlers = function(event) {
      gwd.actions.events.removeHandler('gwd-taparea_1', 'action', gwd.auto_Gwd_taparea_1Action, false);
      gwd.actions.events.removeHandler('page1', 'event-1', gwd.auto_Page1Event_1, false);
      gwd.actions.events.removeHandler('page1_1', 'event-2', gwd.auto_Page1_1Event_2, false);
      gwd.actions.events.removeHandler('gwd-taparea_2', 'action', gwd.auto_Gwd_taparea_2Action, false);
      gwd.actions.timeline.releaseAnimationEnd(document.body);
    };
    document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
    document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
  </script>
  <script data-source="gwdtaparea_min.js" data-version="4" data-exports-type="gwd-taparea" type="text/javascript" src="gwdtaparea_min.js"></script>
</head>

<body>
  <template id="gwd-group-definitions">
    <div data-gwd-group-def="LOGO" data-gwd-group-class="gwd-grp-qagq" style="display: none;">
      <canvas is="gwd-rectangle" width="300" height="45" class="gwd-canvas-hot0 gwd-grp-qagq gwd-gen-16jcgwdanimation" x-off="0" y-off="0" stroke-width="1" stroke-color="[0.9490196078431372,0.9490196078431372,0.9490196078431372,1]" fill-color="[0.9490196078431372,0.9490196078431372,0.9490196078431372,1]"
      tl-radius="0" tr-radius="0" bl-radius="0" br-radius="0" stroke-style="Solid" data-gwd-grp-id="LOGO_RECTANGULO" data-gwd-tl-locked=""></canvas>
      <img is="gwd-image" source="assets/LOGO_COMPOSICION_animado/LOGO_SUPERMERCADO_TRANSPARENTE_400x400.gif" class="gwd-img-1o5k gwd-grp-qagq gwd-gen-apeegwdanimation" data-gwd-grp-id="LOGO_SUPERMECADO">
      <img is="gwd-image" source="assets/LOGO_COMPOSICION_animado/LOGO_TRIANGULO_TRANSPARENTE_400x400.gif" class="gwd-img-33fp gwd-grp-qagq gwd-gen-e8a7gwdanimation" data-gwd-grp-id="LOGO_ECI" data-gwd-tl-locked="">
    </div>
    <div data-gwd-group-def="LOGOESTATICO" data-gwd-group-class="gwd-grp-1ted" style="display: none;">
      <canvas is="gwd-rectangle" width="300" height="45" class="gwd-canvas-hot0 gwd-grp-1ted" x-off="0" y-off="0" stroke-width="1" stroke-color="[0.9490196078431372,0.9490196078431372,0.9490196078431372,1]" fill-color="[0.9490196078431372,0.9490196078431372,0.9490196078431372,1]"
      tl-radius="0" tr-radius="0" bl-radius="0" br-radius="0" stroke-style="Solid" data-gwd-grp-id="LOGO_RECTANGULO_1" data-gwd-tl-locked="" style=""></canvas>
      <img is="gwd-image" source="assets/LOGO_COMPOSICION_animado/LOGO_SUPERMERCADO_TRANSPARENTE_400x400.gif" class="gwd-img-1o5k gwd-grp-1ted" data-gwd-grp-id="LOGO_SUPERMECADO_1" style="">
      <img is="gwd-image" source="assets/LOGO_COMPOSICION_animado/LOGO_TRIANGULO_TRANSPARENTE_400x400.gif" class="gwd-img-33fp gwd-grp-1ted" data-gwd-grp-id="LOGO_ECI_1" data-gwd-tl-locked="" style="">
    </div>
  </template>
  <gwd-doubleclick id="gwd-ad" polite-load="">
    <gwd-metric-configuration>
      <gwd-metric-event source="gwd-taparea_1" event="tapareaexit" metric=""></gwd-metric-event>
      <gwd-metric-event source="gwd-taparea_2" event="tapareaexit" metric=""></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 gwd-div-5mmz gwd-div-mslk" data-gwd-width="300px" data-gwd-height="250px" data-gwd-name="FRAME_1">
        <div class="gwd-page-content gwd-page-size">
          <img is="gwd-image" source="assets/f.png" id="gwd-image_10" class="gwd-img-2qf4">
          <div class="gwd-animation-event event-1-animation" data-event-name="event-1" data-event-time="2500" style=""></div>
          <img is="gwd-image" source="assets/6.png" id="gwd-image_4" class="gwd-img-1gl8 gwd-gen-1gefgwdanimation">
          <img is="gwd-image" source="assets/50%grande_300x250.png" id="gwd-image_3" class="gwd-img-k1j6 gwd-gen-l7pggwdanimation">
          <div class="gwd-div-1v21" data-gwd-group="LOGO" id="LOGO_CABECERA" style=""></div>
          <gwd-taparea id="gwd-taparea_1" class="gwd-taparea-1jxh gwd-taparea-kgzh"></gwd-taparea>
        </div>
      </div>
      <div is="gwd-page" id="page1_1" class="gwd-page-wrapper gwd-page-size gwd-lightbox gwd-div-5mmz gwd-div-16kr" data-gwd-width="300px" data-gwd-height="250px" data-gwd-name="FRAME_2">
        <div class="gwd-page-content gwd-page-size">
          <img is="gwd-image" source="assets/f.png" id="gwd-image_11" class="gwd-img-1o6n">
          <img is="gwd-image" source="assets/6.png" id="gwd-image_6" class="gwd-img-b9sm gwd-gen-1i3ugwdanimation">
          <div data-gwd-group="LOGOESTATICO" class="gwd-div-1bzl" id="LOGO_ESTATICO" style=""></div>
          <img is="gwd-image" source="assets/producto_300x250.png" id="gwd-image_5" class="gwd-img-mmk1 gwd-gen-1boggwdanimation">
          <img is="gwd-image" source="assets/300x250_precio_1.png" id="gwd-image_7" class="gwd-img-1v7n gwd-gen-e1ntgwdanimation">
          <img is="gwd-image" source="assets/50%_300x250.png" id="gwd-image_8" class="gwd-img-1re7 gwd-gen-1x4igwdanimation">
          <img is="gwd-image" source="assets/9.jpg" id="gwd-image_9" class="gwd-img-1r3q gwd-gen-1vr9gwdanimation" data-gwd-tl-hidden="">
          <gwd-taparea id="gwd-taparea_2" class="gwd-taparea-1jxh gwd-taparea-1khc"></gwd-taparea>
          <div class="gwd-animation-event event-2-animation" data-event-name="event-2" data-event-time="4000"></div>
        </div>
      </div>
    </div>
    <gwd-exit metric="GENERAL " url="http://www.elcorteingles.es/supermercado/sm2/catalog.jsp?_requestid=637559"></gwd-exit>
    <gwd-exit metric="GENERAL" url="http://www.elcorteingles.es/supermercado/sm2/catalog.jsp?_requestid=637559"></gwd-exit>
  </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>


Thank you very much!!
Ignacio

Ignacio López Aguirre de Cárcer

unread,
Feb 1, 2016, 9:20:06 AM2/1/16
to Google Web Designer beta
I attach the code .zip pre-published.
300x250.rar
Message has been deleted

San Khong

unread,
Feb 1, 2016, 8:04:34 PM2/1/16
to Google Web Designer beta
Hi Ignacio,

The best way to do it is to add another page that you want the ad to show after 30 sec, then in the first page, FRAME_1, add a custom event to go to this page 30 seconds after the first page is ready to show.

1. Add another frame/page and add content.  You can duplicate FRAME_2 if you want the same content (without the timeline event to go back to FRAME_1) and also add a timeline label at where you want the animation to stop in this new page and add a timeline event gotoAndPause at this timeline label, OR simply clean up the content to show just what you want in this page.
2. Select FRAME_1
3. Add an event:

Target = FRAME_1

Event = Ready to present the page

Action = Add custom action

Configuration =

 setTimeout(nextPage, 6000);

function nextPage() {
  document.getElementById('pagedeck').goToPage('page1_2');
}

Note: page1_2 is the id of the new page added in step 1.  In this example, I set it to 6 sec.

Attached is your zip file with the file I edited and saved as _30sec.html.  

Hope it helps.
San



300x250.zip

Ignacio López Aguirre de Cárcer

unread,
Feb 3, 2016, 2:11:01 PM2/3/16
to Google Web Designer beta
Hi San,

Thank you very much for the quick response. 

The explication and the example were so perfects for me. I solved the problem!!

Thank you very much again, you are the best.

Ignacio
Reply all
Reply to author
Forward
0 new messages