I’m creating a tech news site and am trying to put infield ads as you would on an ad-driven site.
The one ad type that the client is interested in is the INFIELD ADs.
This requires mimicking the size and style of a news card items to insert an ad inbetween news cards.
Here is how Adsense describes how to employ them:
I’ve looked at CMS Template page settings, I’ve tried looking in the Settings panel of the Designer, and I’m pretty sure these are a no go without doing some trickery like having single item collection lists on your page and using a different type of ad.
Has anyone tried inserting an ad like this on a site? I’m not sure this is a high priority for most webflow clients, but perhaps someone has tackled it.
You can’t do this the way Google recommends since we don’t have access to Webflow’s backend. However you can still inject ads into your content using something like JQuery.
Since you said this is for a tech site you can use JQuery to inject an ad after a particular paragraph number like say after the 4th, 10th, and 18th paragraph tag.
Here’s a JS Fiddle where I use jQuery to manually inject a div with the class “adsense-ad” after two specific paragraphs inside of the class “article-content” It should give you an idea.
You essentially just need to get your adsense embed code and use this same logic to inject it after particular paragraphs.
Using jQuery you could even get it to cycle through every nth paragraph. Say for example place an ad after every 6 paragraphs or something of that sort.
I just realized that you’re not necessarily placing the ad between paragraphs but between news cards in a news feed. However the same logic would apply.
Since you will be using webflow’s collection system to make your news cards you’ll be targeting nested divs instead of paragraphs inside of a div. That will look like this:
#article-content>div:nth-child(2n)
It’s pretty much the same you just change the “p” tag to a “div” tag.
Yeah, we scrapped Goog ad strategies in favor of something else.
The general solution we were pursueing is to have two collection lists and put the ad in between them. Beyond that there really isn’t a way to do infield ads without some javascript like @Modii shared.
Best of luck.
Hey @Modii, thanks for this script. It’s exactly what I’ve been looking for.
Unfortunately it looks like I can’t manage to make it work with AdSense’s ads script…
Here is what the Webflow’s Custom Code field looks like (it seems that google’s script broke your when inserted):
Any help will be appreciated! Thanks in advance
P.S. I can’t manage to paste here the code from the picture above, sorry about that.
It’s kind of my fault because of the way I wrote out the example, but the script broke because you used regular quotation marks for a multi-line string. To do a multiline string in Javascript you can do it one of two ways:
1) Regular Quotations “” with + signs:
// using quotations ""
let myString = "this is line 1" +
"this is line 2" +
"this is line 3";
// it's also important that the inner elements don't use the same quotations as that are wrapping the whole string
let correctExample = 'Nathan said, "hello there"';
let wrongExample = "Nathan said, "hello there"";
2) Use Backticks (much better):
// using backticks ``
let myString = `<div class="line1>
<p>See how I can do multiple lines easily?</p>
<p>Backticks make it way easier</p>
<div>`
HOWEVER…
Upon reading my previous comment, I realized that my initial solution was incomplete. While what I provided will insert the code pasted in, it will not actually load any ads since javascript code placed by javascript will not fire automatically.
So I’ve updated my solution below. You would paste this into the footer of the page(s) you want and edit the necessary variables to make it specific to your website.
// type CSS selector of element(s) you want the ads to appear under.
// be aware of the ads per page limitations Google has in place (not sure what the limits are right now)
let adPlacement = 'p:nth-child(5n)'; // <- currently targets every 5th <p> tag
// paste your ad code here and remove everything but the <ins></ins> tags
// to paste a multiline string in Javascript make sure to use backticks `` instead of regular quotations ""
let adCode = `
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3666144125606722"
data-ad-slot="7426248202"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
`
$(document).ready(function()
{
let placeAds = new Promise(function(resolve, reject){
$(adPlacement).after("<div class='adsense-ad'></div>");
resolve()
})
placeAds.then(function(){
$(".adsense-ad").each(function () {
$(this).append(adCode);
(adsbygoogle = window.adsbygoogle || []).push({});
});
})
});
In the code above I’m targeting every 5th paragraph on the page but you can easily swap it out for whatever CSS selector you need. In the code you provided you wrote “#aside-posts>div:nth-child(2)” so that would work easily enough to target the 2nd div in that container.
I don’t have a spare Adsense account to finish testing this with, (unless I screw around with it on a client website haha) but it should work. I made a new account to try and test it but approval takes 24 hrs or something like that. However, let me know if works out for you.
Hey @Modii, thank you very much for your help! Really appreciated!
Unfortunately it doesn’t work as expected. I’ve tried really hard to understand why last couple of hours but still couldn’t figure it out. It seems that creates the necessary div where I want it to be but it doesn’t loads the script or something… I even tried to append a simple text instead of script in the injected div, but it still doesn’t show anything.
The reason it doesn’t appear is because you were targeting the outer container to insert the ad not the div you had just inserted. See my adjustments below.
$(document).ready(function()
{
let placeAds = new Promise(function(resolve, reject){
$(adPlacement).after("<div class='ads'></div>");
resolve()
})
placeAds.then(function(){
// you previously put ".adsblock" here, but you need to loop through each div with the class "ad" and insert an advertisement each time. Not loop through the outer container.
$(".ads").each(function () {
$(this).append(adCode);
(adsbygoogle = window.adsbygoogle || []).push({});
});
})
});
Also I recommend you change the CSS query to target to something like this:
// if you only want it to appear once after the second collection item
let adPlacement = '.adsblock > div:nth-child(2)'
// if you want it to appear after every 2nd collection item
let adPlacement = '.adsblock > div:nth-child(2n)'
In your live site the <div class="ads"></ads> was actually appearing in more than your intended places because you left out the " > " which limits the scope to just the first layer of children. Instead it was appearing in every nested child layer where there were 2 or more div siblings.
Keep in mind the advertisement will likely appear blank on your staging site unless that domain is listed in approved domains on your adsense account. Also if things aren’t working the way you want try checking the console to see if any errors are appearing.
@Modii, man I have no words how much I thank you! Now it works like a charm. So simple and logic, but I didn’t figure it out by myself.
Thank you!
P.S: I even didn’t realised that the ads are blank because I’m publishing changes on my staging site which of course isn’t in the approved sites on my adsense acc
Awesome! Glad it worked out, and yea the “ads” will basically show up as blank iframes if it’s not on an approved site
So long as the iframe is getting inserted it should be working, unless there’s something else against Google’s policy that prevents it from loading (like too many ads on the same page or something like that). You’ll have to read through Google’s adsense policies to know for sure.
Hey, so I’ve been trying to make this work for my use case.
I want the google ads to appear after every second h2, inside the rich text element. I’m trying to customize the ad placement offered by auto ads because it messes around with my layout and I can’t seem to block the ad positions properly.
I’ve placed an embed element after the rich text element.
have a good one.