Synchronizing Banner Ads using JavaScript

"Local Connection" is a JavaScript code that enables iframe elements to connect with each other.

The Purpose of this tutorial?

To help other JavaScript developers who work in the world of advertising.

Banners take highest usage ratio in digital advertisements. And as you may also know, almost all published banners live in the iframe element. It's the most secure way to keep external content in hosting environment. But it also brings some difficulties for banner designers as well as banner developers, such as:

• Not knowing how many redirects may occur until the last view.
• Not knowing how these redirects were used. It may be hard coded iframe or dynamically created with JavaScript.
• We could also not know how deep (iframe-in-iframe) is that banner published.

Synchronizing Banners

This is the main point of this tutorial and it will be much easier to explain with an example. Imagine you have two animated banners and one of them is placed as a skyscraper (10sec., 200kb) on the left-hand side and the other one is a content ad that contains a product video (30sec., 2mb). We want to play the video as soon as the skyscraper finishes its animation.

How can we start playing the video after the animation completes for the skyscraper? Can we simply set a timeOut event after 10sec? Of course not, we have to first make sure that the skyscraper is already loaded and completed its animation. Loading time may take more than 2-3 seconds and we'll never know the connection speed of which device at the time of page loading.

So we need to, somehow, let those banners communicate with each other. There are several methods that can be used. Such as localStorageor postMessage. These methods bring some disadvantages in comparison with the third method Local Connection that I have developed.

Disadvantages of localStorage

1. All modern browsers have it but we have also to consider old browsers that do not support it (IE 8 and older). I know they are not many, but they are still there.
2. It's also difficult to couple correct banners if a user opens a web page in several tabs or windows.

Disadvantages of postMessage

1. Limits the use of communication with predefined messages.
2. Therefore, it's not flexible to use in any scenario.

Advantages of Local Connection

1. Once the connection is established, all connected banners are coupled with each other as child of it's windowobject.
2. Small in size (3kb, 946b zipped).
3. Reliable and fast.
4. The limit of using Local Connection is only your imagination.

How to use Local Connection

1. Prepare your HTML5 Banners with your favorite method. Generators like Adobe Animate, Adobe Edge, or any other tool as well as plain CSS animated banners.
2. Download Local Connection Script here
3. Add this script to all banners that need to synchronized with each other. You can synchronize as many banners as you like.
4. Add the following code to each banner right after the Local Connectionscript. And correct set name and frames values. The sample below is the first banner named right and will connect to left and top named banners.

    <script>
        new LocalConnection({
        key: 'uniqueConnectionString',
        name: 'left',
        frames: ['top', 'right'],
        onConnect: function () {
                /*
                    From this point window of left and top will be available as
                    LC.left and LC.top
                    for example :
                */

                LC.left.document.getElementsByTagName('body')[0].style.backgroundColor = 'pink';
                }
        timeout: 0, // If you want to quit after a given amount of time set here as second 
        onTimeout: function () {
                    // If you set timeout property bigger than '0'
                    // this function will be called if no succes in connection
                }
            });
    </script>

That's it*

The sample above allows three banners to connect with each other. In this sample, the banner right turns the background-color of the left banner into pink. As you can see, you can run or call any JavaScript function to all other banners.

That's it!

For more information: Please visit my website. Or to reach out to me directly, ou can also ask your questions here on my Codementor profile.