What is an efficient method to inject multiple ads into a page using javascript or jquery?

Question

Users can choose to turn on ads. It should display ads if it finds a cookie (or not). I've been able to hack together something that seems to work and do what I need, but it is ugly and clunky. Returning the ad code from a function was the only way I could get it to display correctly. What shortcuts can I use to have only one main function that handles multiple ads?

Please take it easy on me since I'm a beginner. Any suggestions or direction would be great. Thanks.

    var showadsornot = getAdCode();
		
 	  // Put strings in array
		var adText = [
		  "<h1>Ad Code 1</h1>",
		  "<h1>Ad Code 2</h1>",
		  "<h1>Ad Code 3</h1>",
		  "<h1>Ad Code 4</h1>"
		];

		// Look in container to get an array of ad elements
		var container = document.getElementById('globalWrapper');
		var ads = container.querySelectorAll('.displayad');

		// For each element insert the string with the same index
		// (i.e. the first string matches the first element, etc.
		Array.from(ads).forEach(function (displayad, index) {
			displayad.innerHTML = writeAdCode(showadsornot, adText[index]);
		});

		function getAdCode() {
			var showadsornot = "1"; // or empty null
			return showadsornot;
		}

		function writeAdCode(showadsornot, adcode) {
			var newAdCodeTwo = "";
			if(showadsornot){
				newAdCodeTwo += adcode;
			} else {
				newAdCodeTwo += "<h2>No Ads For You!</h2>";
			}
			return newAdCodeTwo;
		}

<html>
<head></head>
<body>
<div id="globalWrapper">

	<!-- Ad Code #1 -->
	<div class="container">
		<div class="displayad"></div>
	</div>

	<!-- Ad Code #2 -->
	<div class="container">
		<div class="displayad"></div>
	</div>

	<!-- Ad Code #3 -->
	<div class="container">
		<div class="displayad"></div>
	</div>

	<!-- Ad Code #4 -->
	<div class="container">
		<div class="displayad"></div>
	</div>
	
</div>
</body>
</html>

To start out, notice that writeAdCodeTwo, three and four are exactly the same except that one variable is named differently. You could write a function just like writeAdCodeTwo that takes 2 arguments - 1 for the ad text and one for the non-ad text. When you call the function just pass in the text that you want for each case. — DonovanM
– DonovanM, Commented Jul 3, 2017 at 18:10
Donovan, that was a great idea. Thanks a lot. I should try passing the cookie value the same way. Do you have any other good ideas? — Jack M.
– Jack M., Commented Jul 3, 2017 at 19:13
Usually when you find yourself numbering variables it's a good sign that you could be using arrays. It won't fit in a comment so I'll just write some example code as an answer. — DonovanM
– DonovanM, Commented Jul 3, 2017 at 20:07

DonovanM · Accepted Answer · 2017-07-04 20:18:49Z

1

Since you have 4 similar elements and the same number of strings to insert into those elements, using arrays can help.

Say you structure your ad elements in a container like this:

<div id="ad-container">
  <div class="ad"></div>
  <div class="ad"></div>
  <div class="ad"></div>
  <div class="ad"></div>
</div>

This would allow you to loop over an array of elements and place the matching text inside of it.

// First put the strings in an array
var adText = [
  "<ins class='adsbygoogle' style='display:inline-block;width:970px;height:250px' data-ad-client='xx-xxx-xxxxxxxxxxxx' data-ad-slot='00000000001'></ins>",
  "<ins class='adsbygoogle' data-ad-format='auto' style='display:block' data-ad-client='xx-xxx-xxxxxxxxxxxx' data-ad-slot='00000000002'></ins>",
  "<ins class='adsbygoogle' style='display:inline-block;width:970px;height:250px' data-ad-client='xx-xxx-xxxxxxxxxxxx' data-ad-slot='00000000003'></ins>",
  "<ins class='adsbygoogle' style='display:inline-block;width:300px;height:1050px' data-ad-client='xx-xxx-xxxxxxxxxxxx' data-ad-slot='00000000004'></ins>"
];

// Look into the container to get an array of ad elements
var container = document.getElementById('ad-container');
var ads = container.querySelectorAll('.ad');

// For each of these ad elements insert the string with the same index
// (i.e. the first string matches the first element and so on    
ads.forEach(function (ad, index) {
  ad.innerHTML = writeAdCode(showadsornot, adText[index]);
});

Something else you could do is dynamically add 'ad' elements to an empty container based on the number of ad strings you have in an array. You would simply loop through the array of strings and forEach string create an ad element and insert its text.

edited Jul 4, 2017 at 20:18

answered Jul 3, 2017 at 20:14

DonovanM

1,1981 gold badge13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

DonovanM Over a year ago

The container holding the ad divs would have one id, but you would only need one container to achieve what you have in your example. The 'ad' divs inside wouldn't need an id. You know their parent and what strings you want to apply to them so you just have to have the strings in the order that you want them to be in the 'ad' divs.

DonovanM Over a year ago

If you're getting that error try using Array.from(ads).forEach instead. You could also use a for loop, but forEach feels cleaner to me.

Jack M. Over a year ago

I added html to the snippet so it would run. It no longer generates an error but no results either. I probably have a typo or syntax error in it. It is much better now even without the cleaner array. It is very cool, thanks for helping.

DonovanM Over a year ago

Ahhh, you know what? querySelector should actually be querySelectorAll. This way it'll return an array. querySelector only returns a single element. That's why .forEach didn't work initially. Sorry about that :)

DonovanM Over a year ago

Also, thanks for updating your code in the snippet. It made it really easy to figure out what was wrong.

|

Collectives™ on Stack Overflow

What is an efficient method to inject multiple ads into a page using javascript or jquery?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related