Generating the correct code of the banner zone in JavaScript
Imagine that we are doing an ad network or something else like that, where you need to give users a certain JS code, by inserting that into different places of the page, different things will be displayed there. Banners, for example. The most common options I encountered were:
The common feature of these approaches is that banners load as the page loads, and if something slows down, the whole page will slow down. Secondly, it will be problematic to update the code that directly shows the banner when outputting to a page. Perhaps this is not critical.
But, in addition to improving these two points, let's add two more conditions to our task and see how well our foreign colleagues decided on buysellads.com. It is necessary for the banner zone to show any code, as well as in the request for the banner to send any information from our other service (for example, the user id in our service that keeps a history of actions on the site).
')
So, we generate the correct codes for banner zones and write a handler for them under the habrakat.
I will tell briefly and schematically, but with a working example, and in detail it will be possible to look at the code for inspiration here and correct it for reading here .
To solve the above four tasks, you need to make a single script banner uploader, which can be updated at any time, which, before outputting the banners to the page, requests the necessary information from another service and can display any banner on the page. It seemed to me that buysellads sinned a little by dividing the code that they give webmasters into two parts. A single banner uploader script is connected in the header, and then the places where they will be shown are placed on the page.
In our case, it will be possible to do the same or call the loader next to each banner place, showing the webmaster a single code for the banner zone. Example of inserting a banner on the page:
Such codes can be added as many times per page. We have some parameters and a function that draws a banner. In my case, it shows certain goods. Demo, which I comment on, you can watch here . Everything is done as quickly and easily as possible. Refactoring and complications sometime in the future, it can be updated easily :)
So, if I (the loader) have not yet loaded onto the page, then we write all the functions that we need. Here, the showProducts function is immediately called, but the banner is not drawn. For now, we just need to remember where it will be shown when loading the page. To do this, when we call, we create in the current place an empty and invisible div with a specific id, so that later it can be found on the page. In addition, for simplicity, we keep records of calls to this function and immediately generate the banner code, which will be shown in this place. This is a bit indecent since there is no data from another service yet, but so far. By the way, here too the banner code can be any. We can also upload any scripts, either insert the flash drive immediately, or simply print the text on the page.
In buysellads, such divs are immediately put on the page, where in the class the code of the banner space is indicated in order to determine later which banner to show. The banner code is not generated there, it is followed by a request to the JS file, which already displays the banner.
Then we see that in the loader, after all the functions at the end of the file, there is a request for the necessary data for the banners. I have this _loadTracker. In response, we will receive a script that calls our callback function, as they say about JSONP , which will provide our loader with the received data for personal use.
Further on the code on window.onload we call the display of our banners. Thus, they will be shown when everything is loaded on the page. It is worth adding a check in case the data from a third-party service has not yet arrived, then you need to wait and try again later on with a timer. But, usually, before the page loads, this data already comes. The page is loaded. Although it is interesting, whether onload is waiting for the data requested in the scripts to load or just quickly everything has loaded in this example. Who will tell?
When the data is received, we go over the entire list of banners that we made when calling showProducts and output the corresponding code instead of the divs we’ve left earlier, replacing the previously missing parameter trackid.
In the case of buysellads, they use getElementsByClassName and getElementsByTagName to search for divs placed on the page. Something is not just there, how to look. But in their case, there is no waiting until the boot loader loads. This code is inserted asynchronously:
Divs are thrown onto the page, without calling JS from this loader.
This is a bit cooler than in the example we have considered. But in my case it is easier to work with parameters, they are immediately written to the page and with their large numbers it will be more convenient, without additional requests for parameters, to the database. As in your case, you choose - this is a general scheme.
The general loader code can be moved to the header (before the first banner is called), or to call it together with each parameter (it will not matter from the cache), create your own script for transferring the banner parameters and any options to display on the page. Everything will appear after the page loads.
Well that's all. Banners on the page. The method seemed the most correct of the revised on the Internet. What do you think, besides what looks like anger banners?
- Plain html banner code insertion (flash drives, pictures).
- Insert an iframe, where the html code is generated by a separate request in the iframe.
- When code is written to js via document.write for the above two methods.
The common feature of these approaches is that banners load as the page loads, and if something slows down, the whole page will slow down. Secondly, it will be problematic to update the code that directly shows the banner when outputting to a page. Perhaps this is not critical.
But, in addition to improving these two points, let's add two more conditions to our task and see how well our foreign colleagues decided on buysellads.com. It is necessary for the banner zone to show any code, as well as in the request for the banner to send any information from our other service (for example, the user id in our service that keeps a history of actions on the site).
')
So, we generate the correct codes for banner zones and write a handler for them under the habrakat.
I will tell briefly and schematically, but with a working example, and in detail it will be possible to look at the code for inspiration here and correct it for reading here .
To solve the above four tasks, you need to make a single script banner uploader, which can be updated at any time, which, before outputting the banners to the page, requests the necessary information from another service and can display any banner on the page. It seemed to me that buysellads sinned a little by dividing the code that they give webmasters into two parts. A single banner uploader script is connected in the header, and then the places where they will be shown are placed on the page.
In our case, it will be possible to do the same or call the loader next to each banner place, showing the webmaster a single code for the banner zone. Example of inserting a banner on the page:
<script type="text/javascript" src="http://digistr.net/static/digistrnet.js"></script> <script type="text/javascript"> var bn = {width: 200, height: 600, param: "value"} _digistrNET.showProducts(bn); </script> Such codes can be added as many times per page. We have some parameters and a function that draws a banner. In my case, it shows certain goods. Demo, which I comment on, you can watch here . Everything is done as quickly and easily as possible. Refactoring and complications sometime in the future, it can be updated easily :)
So, if I (the loader) have not yet loaded onto the page, then we write all the functions that we need. Here, the showProducts function is immediately called, but the banner is not drawn. For now, we just need to remember where it will be shown when loading the page. To do this, when we call, we create in the current place an empty and invisible div with a specific id, so that later it can be found on the page. In addition, for simplicity, we keep records of calls to this function and immediately generate the banner code, which will be shown in this place. This is a bit indecent since there is no data from another service yet, but so far. By the way, here too the banner code can be any. We can also upload any scripts, either insert the flash drive immediately, or simply print the text on the page.
In buysellads, such divs are immediately put on the page, where in the class the code of the banner space is indicated in order to determine later which banner to show. The banner code is not generated there, it is followed by a request to the JS file, which already displays the banner.
Then we see that in the loader, after all the functions at the end of the file, there is a request for the necessary data for the banners. I have this _loadTracker. In response, we will receive a script that calls our callback function, as they say about JSONP , which will provide our loader with the received data for personal use.
Further on the code on window.onload we call the display of our banners. Thus, they will be shown when everything is loaded on the page. It is worth adding a check in case the data from a third-party service has not yet arrived, then you need to wait and try again later on with a timer. But, usually, before the page loads, this data already comes. The page is loaded. Although it is interesting, whether onload is waiting for the data requested in the scripts to load or just quickly everything has loaded in this example. Who will tell?
When the data is received, we go over the entire list of banners that we made when calling showProducts and output the corresponding code instead of the divs we’ve left earlier, replacing the previously missing parameter trackid.
In the case of buysellads, they use getElementsByClassName and getElementsByTagName to search for divs placed on the page. Something is not just there, how to look. But in their case, there is no waiting until the boot loader loads. This code is inserted asynchronously:
<!-- BuySellAds.com Ad Code --> <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = 'http://cdn.buysellads.com/ac/pro.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script> <!-- END BuySellAds.com Ad Code --> Divs are thrown onto the page, without calling JS from this loader.
<div id="bsap_23" class="bsaPROrocks" data-serve="CVAE"></div> This is a bit cooler than in the example we have considered. But in my case it is easier to work with parameters, they are immediately written to the page and with their large numbers it will be more convenient, without additional requests for parameters, to the database. As in your case, you choose - this is a general scheme.
The general loader code can be moved to the header (before the first banner is called), or to call it together with each parameter (it will not matter from the cache), create your own script for transferring the banner parameters and any options to display on the page. Everything will appear after the page loads.
Well that's all. Banners on the page. The method seemed the most correct of the revised on the Internet. What do you think, besides what looks like anger banners?
Source: https://habr.com/ru/post/215673/
All Articles