javascript - 如何在 DoubleClick Studio 中通过 js 文件映射资源？

Question

我正在尝试找出如何通过 js 文件映射我的 Assets ，以便我可以在本地查看横幅。我找不到任何关于如何编写代码的教程。任何援助将不胜感激。我能够上传提要并看到为每个元素生成了 ID。我想弄清楚如何将我的图像用作动态内容(横幅使用图像作为所有元素)，但 CTA 和法律是实时文本。

"use strict"

var dynamic = {};

function initDynamicContent(){
  

//====================================================== Code copied from Studio ======================================================  
    Enabler.setProfileId(1074113);
    var devDynamicContent = {};
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed= [{}];
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0]._id = 0;
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Unique_ID = 1;
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Reporting_Label = "Internet_UF40_Offer_300x250_ON";
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Product = "";
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].lifestyle_bg = "images/banner-bg.jpg";
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Language = "EN";
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Headline_Package_Name = "ULTRAFIBRE 40";
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].With_Offer = "Y";
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Offer = "75";
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Offer_Term_Text = "\/mo.";
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Body_Package_Text = "";
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].CTA = "Discover your offer";
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].CTA_URL = {};
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].CTA_URL.Url = "https://www.cogeco.ca";
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Legal_Text = "Conditions apply.";
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Default = "";
   devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Active = true;
   Enabler.setDevDynamicContent(devDynamicContent);
//====================================================== Code copied from Studio ======================================================  

    //Attaching dynamic content with the feed information.
    devDynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0];

    document.getElementById("Offer").innerHTML = dynamic.Offer;
    document.getElementById("Offer_Term_Text").innerHTML = dynamic.Offer_Term_Text;
    document.getElementById("cta").innerHTML = dynamic.CTA;
    document.getElementById("conditions").innerHTML = dynamic.Legal_Text;
    
    document.getElementById("lifestyle_bg").src = dynamic.img_bkg.Url;

  
}

function addListeners () {
  //Adding listeners
  document.getElementById("bg-exit").addEventListener('click', bgExitHandler, false);
}

//----Exits----
function bgExitHandler(e) {
  Enabler.exitOverride('Background Exit', dynamic.Landing_destino.Url);
}



//====================================================== Setting up - Don't need to change ======================================================  
window.onload = function() {
  if (Enabler.isInitialized()) {
      enablerInitHandler();
  } else {
      Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
  }
}

function enablerInitHandler() {
      initDynamicContent();
      addListeners(); 
}

        body {
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale !important;
            text-rendering: optimizeLegibility;
        }

        #lifestyle_bg {
            width: 300px;
            height: 250px;
            background-image: url('banner-bg.jpg');
            position: absolute;
            overflow: hidden;
            left: 0;
            top: 0;
            opacity: 0;
            -webkit-animation-timing-function: ease;
            -moz-animation-timing-function: ease;
            animation-timing-function: ease;
            -webkit-animation-name: lifestyle_bg_animation;
            -moz-animation-name: lifestyle_bg_animation;
            animation-name: lifestyle_bg_animation;
            -webkit-animation-duration: 10s;
            -moz-animation-duration: 10s;
            animation-duration: 10s;
            animation-iteration-count: 1;
        }
        
        #base {
            background: #ffffff;
            display: inline-block;
            height: 250px;
            position: relative;
            width: 300px;
            margin-top: 187px;
            -webkit-animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
            -moz-animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
            animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
            -webkit-animation-name: base_animation;
            -moz-animation-name: base_animation;
            animation-name: base_animation;
            -webkit-animation-duration: 10s;
            -moz-animation-duration: 10s;
            animation-duration: 10s;
            animation-iteration-count: 1;
        }
        
        #base:before {
            border-bottom: 45px solid #ffffff;
            border-left: 300px solid transparent;
            border-right: 0px solid transparent;
            content: "";
            height: 0;
            left: 0;
            position: absolute;
            top: -45px;
            width: 0;
        }
        
        #textOne {
            width: 300px;
            height: 250px;
            background-image: url('text1.png');
            position: absolute;
            overflow: hidden;
            bottom: 0;
            left:0;
            opacity: 0;
            -webkit-animation-timing-function: ease;
            -moz-animation-timing-function: ease;
            animation-timing-function: ease;
            -webkit-animation-name: textOne_animation;
            -moz-animation-name: textOne_animation;
            animation-name: textOne_animation;
            -webkit-animation-duration: 10s;
            -moz-animation-duration: 10s;
            animation-duration: 10s;
            animation-iteration-count: 1;
        }

        #textTwo {
            width: 300px;
            height: 250px;
            background-image: url('text2.png');
            position: absolute;
            overflow: hidden;
            bottom: 0;
            left: 0;
            opacity: 1;
            -webkit-animation-timing-function: ease;
            -moz-animation-timing-function: ease;
            animation-timing-function: ease;
            -webkit-animation-name: textTwo_animation;
            -moz-animation-name: textTwo_animation;
            animation-name: textTwo_animation;
            -webkit-animation-duration: 10s;
            -moz-animation-duration: 10s;
            animation-duration: 10s;
            animation-iteration-count: 1;
        }

        #textThree {
            width: 300px;
            height: 250px;
            background-image: url('text3.png');
            position: absolute;
            overflow: hidden;
            bottom: 0;
            left: 0;
            opacity: 1;
            -webkit-animation-timing-function: ease;
            -moz-animation-timing-function: ease;
            animation-timing-function: ease;
            -webkit-animation-name: textThree_animation;
            -moz-animation-name: textThree_animation;
            animation-name: textThree_animation;
            -webkit-animation-duration: 10s;
            -moz-animation-duration: 10s;
            animation-duration: 10s;
            animation-iteration-count: 1;
        }

        #device_icon {
            width: 300px;
            height: 250px;
            background-image: url('device_icon.png');
            position: absolute;
            overflow: hidden;
            bottom: 0;
            left:0;
            opacity: 0;
            -webkit-animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
            -moz-animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
            animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
            -webkit-animation-name: device_icon_animation;
            -moz-animation-name: device_icon_animation;
            animation-name: device_icon_animation;
            -webkit-animation-duration: 10s;
            -moz-animation-duration: 10s;
            animation-duration: 10s;
            animation-iteration-count: 1;
        }

        #device {
            width: 300px;
            height: 250px;
            background-image: url('device.png');
            position: absolute;
            overflow: hidden;
            top: 17px;
            left: 56px;
            opacity: 1;
            -webkit-transform: scale(0.7); /* Safari */
            -moz-transform: scale(0.7); /* Safari */
            transform: scale(0.7); /* Standard syntax */
            -webkit-animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
            -moz-animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
            animation-timing-function:cubic-bezier(0.59, 0, 0.36, 0.98);
            -webkit-animation-name: device_animation;
            -moz-animation-name: device_animation;
            animation-name: device_animation;
            -webkit-animation-duration: 10s;
            -moz-animation-duration: 10s;
            animation-duration: 10s;
            animation-iteration-count: 1;
        }
        

        
        #mybackground {
            width: 300px;
            height: 250px;
            position: relative;
            background-color:#00aeef;
            overflow: hidden;
            border: 1px solid #000;
            box-sizing: border-box;
        }

        
        
        #cta {
            background-color: #e87934;
            width: auto;
            padding: 5px 13px;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
            position: absolute;
            line-height: 24px;
            font-size: 11px;
            line-height: 16px;
            text-align: center;
            color: #fff;
            bottom: 19px;
            left: 24px;
            opacity: 1;
            vertical-align: middle;
            transform: scale(1.0);
            -webkit-perspective: 1000;
            -webkit-animation-name: cta_animation;
            -moz-animation-name: cta_animation;
            animation-name: cta_animation;
            -webkit-animation-duration: 10s;
            -moz-animation-duration: 10s;
            animation-duration: 10s;
            animation-iteration-count: 1;
        }
        
        #conditions {
            width: auto;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
            position: absolute;
            font-size: 8px;
            text-align: center;
            color: #000;
            bottom: 4px;
            left: 24px;
            opacity: 1;
            -webkit-animation-name: conditions_animation;
            -moz-animation-name: conditions_animation;
            animation-name: conditions_animation;
            -webkit-animation-duration: 10s;
            -moz-animation-duration: 10s;
            animation-duration: 10s;
            animation-iteration-count: 1;
        }
        
        #cogeco-logo {
            background-image: url('cogeco-logo.png');
            width:300px;
            height:250px;
            position: absolute;
            bottom: 0;
            right: 0;
            opacity:1;
            -webkit-animation-name: logo_animation;
            -moz-animation-name: logo_animation;
            animation-name: logo_animation;
            -webkit-animation-duration: 10s;
            -moz-animation-duration: 10s;
            animation-duration: 10s;
            animation-iteration-count: 1;
        }
        


        @keyframes lifestyle_bg_animation {
            0% {
                margin-top:0;
                opacity:1;
            }
            35% {
                margin-top:0;
                opacity:1;}
            45% {
                margin-top:0;
                opacity:0;}
            100% {
                margin-top:0;
                opacity:0;
            }
        }

        @keyframes base_animation {
            0% {
                margin-top:300px;
            }
            5% {
                margin-top: 300px;
            }
            15% {
                margin-top: 187px;
            }
            100% {
                margin-top: 187px;
            }
        }
        
        

        @keyframes textOne_animation {
            0% {
                opacity: 0;
            }
            12% {
                opacity: 0;
            }
            17% {
                opacity: 1;
            }
            35% {
                opacity: 1;
            }
            45% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }


        @keyframes logo_animation {
            0% {
                opacity: 0;
            }

            58% {
                opacity: 0;
            }
            68% {
                opacity: 1;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes device_icon_animation {
            0% {
                opacity: 0;
                margin-left: 30px;
            }
            12% {
                opacity: 0;
                margin-left: 30px;
            }
            17% {
                opacity: 1;
                margin-left:0;
            }
            35% {
                opacity: 1;
                margin-left:0;
            }
            45% {
                opacity: 0;
                margin-left:0;
            }
            100% {
                opacity: 0;
                margin-left:0;
            }
        }

        @keyframes device_animation {
            0% {
                opacity: 0;
                top: 30px;
                left:0;
                -webkit-transform: scale(1); /* Safari */
                -moz-transform: scale(1); /* Safari */
                transform: scale(1); /* Standard syntax */

            }
            40% {
                opacity: 0;
                top:30px;
                left:0;
            }
            50% {
                opacity: 1;
                top:0;
                left:0;
                -webkit-transform: scale(1); /* Safari */
                -moz-transform: scale(1); /* Safari */
                transform: scale(1); /* Standard syntax */
            }
            60% {
                opacity: 1;
                top: 17px;
                left: 56px;
                -webkit-transform: scale(0.7); /* Safari */
                -moz-transform: scale(0.7); /* Safari */
                transform: scale(0.7); /* Standard syntax */
            }
            100% {
                opacity: 1;
                top: 17px;
                left: 56px;
                -webkit-transform: scale(0.7); /* Safari */
                -moz-transform: scale(0.7); /* Safari */
                transform: scale(0.7); /* Standard syntax */
            }
        }
        

        @keyframes textTwo_animation {
            0% {
                opacity: 0;
            }
            58% {
                opacity: 0;
            }
            68% {
                opacity: 1;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes textThree_animation {
            0% {
                opacity: 0;
            }
            61% {
                opacity: 0;
            }
            71% {
                opacity: 1;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes cta_animation {
            0% {
                opacity: 0;
            }
            66% {
                opacity: 0;
            }
            76% {
                opacity: 1;
            }
            88% {
                opacity: 1;
                transform:scale(1.0);-webkit-perspective:1000;
            }
            89% {
                opacity: 1;
                transform:scale(1.1);
            }
            91% {
                opacity: 1;
                transform:scale(1.0);-webkit-perspective:1000;
            }
            100% {
                opacity: 1;
            }
        }
        

        @keyframes conditions_animation {
            0% {
                opacity: 0;
            }
            70% {
                opacity: 0;
            }
            80% {
                opacity: 1;
            }
            100% {
                opacity: 1;
            }
        }
        

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">

    <!-- ATENTION!!!! Change your ad size below. -->
    <meta name="ad.size" content="width=300,height=250">

    <title>HTML5 Dynamic 300x250 template</title>

    <!-- CSS -->
    <link rel="stylesheet" href="HTML5_Dynamic_300x250_template.css">

    <!-- JS -->
    <script src="HTML5_Dynamic_300x250_template.js"></script>

    <!-- Enabler should always come first. -->
    <script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
    
  </head>

<html>

<body style="width:300px;height:250px; margin:0 auto;">
    <a href="#" id="clickthrough-button" class="button clickthrough">
        <div id="mybackground">
            <div id="lifestyle_bg"></div>
            <div id="base"></div>
            <div id="find_out"></div>
            <div id="cogeco-logo"></div>
            <div id="textOne"></div>
            <div id="textTwo"></div>
            <div id="textThree"></div>
            <div id="device"></div>
            <div id="device_icon"></div>
            <div id="cta">Discover your offer</div>
            <div id="conditions">Conditions apply.</div>

        </div>
    </a>
</body>

</html>

Answer 1

当您引用动态内容时，您需要将“devDynamicContent”更改为dynamicContent。

例如

document.getElementById("Offer").innerHTML = dynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Offer;

document.getElementById("Offer_Term_Text").innerHTML = dynamicContent.Cogeco_Always_On_Feed_WIP__AlwaysOn_Feed[0].Offer_Term_Text;