Code Corner: Example Technique for Randomizing Ads in a DPS HTML Overlay

One of the DPS apps we’ve worked on recently was a digitally reimagined take on a print magazine.

At the 11th hour, the client decided that they needed to include the ads they’d already sold for the print edition into the app version of the magazine, but didn’t really provide any requirements for how they should display. Ordinarily, we’d design the experience of the app around the fact that there’d be ads in it, but because the app had already been architected and laid out without ads in mind — and there wasn’t any time to rethink everything — we had to get a little bit creative to get these print ads into the app.

The client requested that we randomly select between the print ads each time the app needs to display one. After a lot of discussion, we decided that the least-annoying way to accomplish what we needed was to trigger a full screen ad view whenever users changed categories in the app. Users will still be able to swipe through pages in each section without being interrupted with ads, but when changing sections they’d briefly see one and be able to click on it to visit the advertiser’s site.

We decided that, in order to ease the process of the client updating the ads themselves in the future, that we should render them inside an HTML Overlay, leveraging some javascript to randomize between them. Swapping out the ads would only require replacing the images and and updating the links before updating the folio.

 

 


Here’s a re-creation of what it looked like (except looping for effect): 

 

 

 

 

This is a simplified and annotated example of the index.html that lives inside the HTML Overlay:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html>
  <head>
    <!-- // our js files are inside our HTMLResources.zip, which lives 3 directories up -->
    <script src="../../../HTMLResources/js/jquery.min.js"></script>
    <style>
      body {
        margin: 0;
        background-color: #000000;
      }
      #ad {
        width: 100%;
        height: 100%;
      }
      #img {
        position: absolute;
        width: 616px;
        height: 756px;
        left: 50%;
        margin-left: -308px;
        display:none;
      }
 
    </style>
  </head>
 
  <!-- // when the body loads, run the function that picks an ad and displays it -->
  <body onload="showImage()">
    <div id="ad" class="ad">
      <a id="link" onclick="">
        <img id="img" class="ad" src="" />
      </a>
    </div>
 
    <script type="text/javascript">
 
      // our ad images are inside our HTMLResources.zip, which lives 3 directories up
      var adDir = "../../../HTMLResources/ads/";
 
      // this is a link to the article that should load after the ad displays
      var navigateTo = "navto://destarticle";
 
      function showImage() {
 
        // multidimensional array. [0] is ad image, [1] is click url, [2] is human-readable name
        var theAds = [
          ['ad1.jpg','https://www.youtube.com/watch?v=XEAjKTO_o-k','ad one'],
          ['ad2.jpg','https://www.youtube.com/watch?v=HPBrQJfweuE', 'ad two'],
          ['ad3.jpg','https://www.youtube.com/watch?v=8uNW1JRF8U4', 'ad three'],
          ['ad4.jpg','https://www.youtube.com/watch?v=P9VVa9NahSQ', 'ad four'],
          ['ad5.jpg','https://www.youtube.com/watch?v=sshZ8B7YQDY', 'ad five']
        ];
 
        // randomly select an ad from the list
        var adInfo = theAds[Math.round(Math.random() * (theAds.length - 1))];
 
        // the ads may not always have a link to visit, so check to see if there is one prior to adding an onclick for it
        if (adInfo[1] !== null){
          $('#link').attr("onclick", 'adClick(\''+adInfo[1]+'\')');
        }
 
        // wait 4 seconds and then navigate to desired article
        if (navigateTo !== ""){
          setTimeout(function(){ $("#img").fadeOut(500); window.location = navigateTo; }, 4000);
        }
 
        // set the img src to the url for the randomly chosen ad
        $('#img').attr("src", adDir + adInfo[0]);
 
        // our ads are all 616px wide, iPad is 1024px wide and this app is widescreen-only. Let's use that knowledge to center the image
        $("#img").css("margin-left", -308);
        $("#img").css("left", "50%");
        $("#img").css("width", 616);
        $("#img").fadeIn(500);
      }
 
      function adClick(adInfo){
        window.open(adInfo);
      }
    </script>
  </body>
</html>
 

If you want to try it out yourself, here is a download of this project that you can drop into your DPS project. Just change the navigateTo variable to point to the article name you want the reader to be sent after the ad displays and you should be good to go.

If you have the need to present an ad-like image inside an HTML Overlay in DPS, hopefully this post should get you started on the right track.

Stay tuned for a future post that explains the process of adding analytics to your HTML/js content within a DPS HTML Overlay, should you want to track the performance of these ads.