Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by martya

  1. I'm looking for a banner dev to do some freelance work starting in the next week or so in North Sydney, up until around xmas. I need someone who can work on-site (atleast some of the time) along side me on a banner campaign for a high profile client and possibly some general front end work as well.  It's an Ad Agency, laid back/flexible environment. Must have previous banner development (HTML5/Greensock etc preferred) experience. Please send me a PM if your interested!


    Mods: If I'm not allowed to post this sorry plz delete and accept my apologies.

  2. The default code from Sizmek is this by the way:

    var adDiv;
    function initEB() {
        if (!EB.isInitialized()) {
            EB.addEventListener(EBG.EventName.EB_INITIALIZED, startAd);
        } else {
    function startAd() {
        adDiv = document.getElementById("ad");
    function addEventListeners() {
        document.getElementById("clickthrough-button").addEventListener("click", clickthrough);
    function clickthrough() {
    window.addEventListener("load", initEB);

    (The template you're using didn't come directly from Sizmek and the visibility styling isn't required or part of their API.)


    I've tried many combinations using their default examples and other peoples templates just to be sure. But surely it's not acceptable to begin animation without their API being initialized? StartAd() is where the animation should be triggered from and this won't trigger inside the iframe.

    When I get some more time I'll continue trying some things. 

  3. I use gitflow for software/web dev and have also applied a simplified implementation of it to banner dev. Work off the dev branch, merge up to master and tag releases. I haven't seen any merit it using release/feature/hotfix branches for banner dev, same goes for small software projects. 


    If the entire campaign gets changed I'll take a tag to mark the version (version-1 etc) before butchering everything up on develop.


    I currently store all the banners in the branch as subfolders. 


    One repo is one campaign

    One subfolder is one banner variation (creative/size/language) - each folder contains a gulp build task.
  4. I've done some more research on this. So I started by downloading a example sizmek template and putting it in my iframe wrapped and it worked straight away.

    The template was - https://github.com/joemidi/sizmek-html5-template/tree/master/build from @joemidi 


    I spent ages comparing code and found nothing really different. In the end I found that the only difference was that my banner has the content hidden initially until the banner is initialized. Once the init event is received, the container is made visible where as the the sample starts with the banner visible so it masks the fact that the init event isn't actually being hit. When I debugged the sample banner I found that it was not being initialized either. 


    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Sizmek 300x250</title>
      <style type="text/css">
            #banner {
                display: none;
                z-index: 20;
      <script type="text/javascript" src="//ds.serving-sys.com/BurstingScript/EBLoader.js"></script>
      <script type="text/javascript">
      function initEB(){
        if (!EB.isInitialized()) {
          // this will never be hit
          EB.addEventListener(EBG.EventName.EB_INITIALIZED, startAd);
        else {
          // this will never be hit
      function startAd() {
        // because the init never gets fired, this will never be hit
        document.getElementById("banner").style.visibility = "visible";
      function handleClickthroughButtonClick() {
    <body onload="initEB();">
      <div id="ad">
        <div id="banner">
          <div class="label"><strong>HTML5 Standard Banner:</strong> 300x250</div>
          <div class="buttons">
            <button id="clickthroughButton" class="button clickthrough" onclick="javascript:handleClickthroughButtonClick();">ClickThrough</button>

    So the above code will not work inside an iframe (you'll see nothing because it's hidden) and will work outside an iframe (direct). If I comment out the style block to hide the banner initially it will show the banner but thats just bypassing the sizmek API which is incorrect.

  5. I've never had a problem using iframes/our preview site to display Sizmek banners.  Do you have an Ad Blocker running that could be causing issues?  


    Can you share an example file that you've had trouble with?

    Can you confirm if you can still host through an iFrame?



    They have changed something recently. Now only this include works:


    <script src="https://secure-ds.serving-sys.com/BurstingScript/EBLoader.js"></script>

    But best if You get/steal/beg for a SIZMEK login to try out Your banners in their MediaMind Sizmek MDX, where You can make preview links for them.

    Yeh it's very hard dealing with media (via our pm and account execs etc), but a login would be ideal. I'll try and request access. 


    It would still be good to find a work around, I've got a simple wrapper website that we deploy to so that our team can do internal QA etc, it sucks that I can't embed the sizmek ads any more, I slapped in a workaround on Friday to open them in a new window but it would be nice to be able to embed again. I'll keep sniffing around I'm sure there's a way to trick their API.


    Another line of thought was maybe my banner wrapper needs to run under https, that was the next thing I was going to try.

  6. Has anyone had problems embedding a sizmek banner in an iframe to demo? I usually embed them in an iframe through a webapp that I built, but the sikmek banners don't run - the EB init event listener never gets hit, but works fine when served directly (without iframe)

    It's a pretty standard clicktag implementation. Is there a known issue with doing this?




  7. @martya, working in a bigger agency with a lot of different people with different skill sets, a preview tool that could support multiple methods of banner creation would be more useful. I would also be interested in creating automated test scripts for banners, make sure they click through or have the CORRECT click through for whatever platform they are created for, should it be Enabler.exit(), ExitApi.exit(), EB.clickthrough(), etc


    Much like the DCM/AdWords testers on AppSpot, but that could handle any banner or platform.

    I was thinking exactly the same thing, the only real question is where would the testing take place. Technically if your automating builds, it should be performing the validation in the test phase and fail the build if it's not correct, preventing the banners from being deployed (to preview tool etc).


    However from a product point of view it makes sense to have some intelligence in the preview tool, I can't see the masses being too keen on running banners through CI. For argument sake the banners could first go into a draft mode on the preview tool which allows for validation to take place before allowing it to be published for clients to see etc.


    I was thinking last night maybe banner validation could be performed using Selenium tests, I might have a play around with that.

  8. Thanks for the input guys. Yeh from the preview tool perspective, it should be possible to build a common display platform because at that point we should be working with the final deploy files only, not the working files, the preview tool shouldn't know or care what the banner was built with, only what the target platforms are (DCM, DCRM etc). 


    How you build the preview files depends. It could be an export from Animate CC or a build task from gulp/grunt, but the final output of this should match the platform requirements. 


    CI/CD is an optional extra. If I was building the preview tool as a proper product instead of my CI process publishing to a folder on the server I could instead build an API and have the deploy task push the banner files to that through powershell etc

    • Like 1
  9. I've put together a CI flow that I've tested on a recent campaign and it's gone pretty well but there's definitely room for improvement. Here's a rundown on how set our workflow up. I'm interested to hear if you guys are doing anything similar or have any opinions on the process.

    - A campaign has one source control repository.
    - Each campaign has a campaign.json file in the root which contains some basic metadata about the campaign.
    - Each banner lives in a subfolder within the repo with it's own package.json and gulpfile.js which is generated by the yeoman generator (buildabanner).
    - Each banner has a banner.json which contains some basic metadata about the banner (ideally this would be created by the template workflow).

    Continuous Integration
    At our agency we primarily develop in the .net framework so I use AppVeyor as our CI tool. As soon as a dev commits, my custom CI script (YAML) loops through each subfolder and runs the gulp build task for that banner, then adds a new folder to a zip file for that banner, containing the distribution files, and the delivery files (zip and backup.gif). We end up with one zip to represent the campaign which is pushed up as the deploy artifact. 

      - npm install -g gulp
    shallow_clone: true
    clone_folder: c:\projects\myproject
    test: off  
      campaign_folder: mycampaign
      campaign_zip: mycampaign-banners.zip
      campaign_zip_path: tba
      - cmd: set campaign_zip_path=c:\projects\myproject\%campaign_zip%
      - node --version
      - npm --version
      - echo Gulp Version
      - gulp -v
      - echo %CD%
      - cmd: dir /b
      #note: 7z can't set the desination path when adding a file so we add the file first, then rename it to move it to the desired folder.
      - cmd: 7z a %campaign_zip_path% campaign.json
      - cmd: 7z rn %campaign_zip_path% campaign.json %campaign_folder%\campaign.json 
      #call batch file - appveyor doesnt support multiline cmds correctly - https://stackoverflow.com/questions/37627248/how-to-split-a-command-over-multiple-lines-in-appveyor-yml
      - cmd: package-subfolders.bat
    skip_tags: true
      - echo Pushing Artifacts...
      - ps: Push-AppveyorArtifact $env:campaign_zip -DeploymentName bannersdist
    - provider: Environment
      name: uat
     - cmd: echo Preview URL will be - http://banners.xxxxx.com/campaign/%campaign_folder%


    FOR /D %%G in ("*") DO (
      Pushd %%G
      Echo Packaging banner - %%G
      npm install
      gulp ba
      7z a %campaign_zip_path% banner.json 
      7z rn %campaign_zip_path% banner.json %campaign_folder%\%%G\banner.json
      7z a %campaign_zip_path% dist\* 
      7z rn %campaign_zip_path% dist %campaign_folder%\%%G\preview
      7z a %campaign_zip_path% delivery\* 
      7z rn %campaign_zip_path% delivery %campaign_folder%\%%G\delivery
    Popd )

    Continuous Deploy
    The deploy artifact from the previous step is unzipped to a specific folder that matches the campaign name on our uat server. 

    Preview Tool
    I created a really simple .net webapp that sits on the UAT server that reads the folder structure from the banner deploy folder. That's where the campaign.json and banner.json files come in, they provide the extra information to make the preview tool presentable to the internal team/media agency/client. They can all view/download the latest files as they please without having to bother development. Note that I added a "published" flag to the banner.json file so that we can hide banners from appearing on the site until we're ready.

    That way we can give out a structured URL - http://banners.xxxxx.com/campaign/[campaign_folder] and you'll see a table with all the banners that are up on the uat server, you can click in and see the embedded banner and backup gif with buttons to download the delivery files etc. I'm also doing a couple of handy things like calculating the total file size of the banner (adding up all the files in dist folder) so we can keep an eye on the sizes at all times.

    A few hours of my spare time to build it but it's already paying off, as with the nature of ad agencies we're doing constant revisions under high pressure so it's nice to know the dev can make a change and that the latest versions of the banners will be up on the server at all times (a couple of minutes after the commit) without any manual work. Looking at the appveyor logs, in the space of this one campaign (around 20 individual banners) over the last week the tool has done over 100 builds/deploys. That's hours of manual deploys saved and freeing us up to get on with the job.





    In the long term I'd like to turn the web app into a proper tool with proper logins and notifications when deploys have been made etc. Are there any products out there that do the job of this preview tool? I've had a brief look before I created it and couldn't really find anything. 




    It's not a perfect process, there's heaps I'd like to improve on but it's miles ahead of the old process which was - developer creates working files on his desktop and emails zip files to producer on demand, eventually source files are lost forever.


    • Like 3
  10. Thankyou guys sooo much for the replies, I'm overwhelmed! Sorry for the late reply, I've been flat out working on so many things #agencylife


    After reading the info about DCRM and DCM I seeked clarification from the media agency and as most of you suspected, by "doubleclick" they mean't DCM. So I've refactored the click tags and it's all good. 

    I will test out BannerTime and WarenGonza's workflows. Buildabanner is going alright but it doesn't fit my workflow perfectly. It's done the job for this campaign, but I'm thinking of either forking out the best workflow I can find or writing my own. 

    • Like 2
  11. Hi Guys,

    I've been lurking on this forum for a while and have hit finally got to the point where I need to ask some questions. Firstly I'd like to say Hi and I really like what I've seen on this forum, I've been a full stack developer for 16 years but the banner world is fairly new to me (I did help out with some flash banners way back). The situation I'm in is I'm a tech lead, the previous front end dev used to look after the banners and the process was very adhoc. I have a freelancer with no banner experience so I'm trying to hold his hand through the process even though I don't know much more than him. I'm trying to put some processes and standards in place for banner development.


    For the campaign that I'm working on currently, I've tried out this Yeoman generator - BuildABanner , using the DoubleClick template.


    I like what I see, it's generating a nice folder structure, with nice gulp tasks and best practices (polite loading content etc). Using the DoubleClick template it makes proper use of the enabler events and it's triggering an Exit event as the clicktag. I can see in the console when I click on it that the enabler is receiving the event. 



    bgExit = document.getElementById('background_exit_ad');
    //Add Event Listeners for DoubleClick
    addListeners = function() {
        bgExit.addEventListener('click', bgExitHandler, false);
    bgExitHandler = function(e) {
        //Call Exits

    I've been tasked with developing some banners built to 'doubleclick' spec but will be served on two different networks/suppliers (Cadreon and Ansible). I'm still struggling to grasp the difference between the platforms and networks etc.


    So I thought I'd do a test before sending it off to the media agency (so I don't look like an idiot). I tried out this DoubleClick Campaign Manager HTML5 Validator.


    When I validate my banner (with the above click tag) it passes all the rules except for the click tag and says that it's not present. I thought that the enabler.exit event was the best practice way to do this? 


    When I look back at some previous banners developed by my old front end dev, he had simply referenced the enabler.js, but implemented the click tag this way, marked up in the comments as "Standard ClickTag";



        <meta name="ad.size" content="height=0,width=0">
        <script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
          var clickTag = "http://www.google.org";
        <a href="javascript:window.open(window.clickTag)">blah</a> 

    Adding this into my banner along side the exit event would be doubling up the events so as I see it - I should be using one or the other?


    Is this tool just stupid? I don't mind simplifying the code and doing it the generic way but it makes more sense to me as a dev to use the proper events within enabler and it would also allow me to keep the buildabanner generated code as untouched as possible.

    Also does anyone have any feedback on the buildabanner system itself?? Does anyone use it? Or do you use a different yeoman tool? Very keen to hear some real world feedback on this.