What are Parallax Ads in Google Adsense

Post a Comment

How to Place a Parallax Ad in the Middle of a Post

How to place Parallax ads is one of the tutorials that is often requested by Igniel blog readers. After a long time, I finally got around to writing it down.

What are Parallax Ads?

Parallax is a type of advertisement that appears attached and is "behind" the post page. The position will remain still when the visitor scrolls so that the annoyed ad appears from the "deep". This creates a unique optical illusion. That's why there are so many requests to make tutorials on how to post parallax ads on blogs.

How to Place a Parallax Ads in the Middle of a Post

Parallax blog ads only appear on the mobile version. So if you want to see it, be sure to open this blog on your cellphone or other device with a small screen.

Parallax Ad "Unique" Conditions

The parallax ad that I made only uses CSS. The advantages are certainly more practical. But because of that, there are several conditions that you must understand in placing this parallax ad.

Ideally, parallax ads are placed on blogs that only have one column. Meaning: on a blog that does NOT have a sidebar. This is to prevent ad positions that are less proportional because the use of CSS alone is not optimal in calculating page width.

Rarely is there a blog that doesn't have a sidebar? So the conditions above can also mean when the sidebar is shifted down so that the post column remains wide. This condition is common on screen widths below 640px.

In other words, parallax ads will be great if they appear only on the mobile version when the screen width is smaller than 640px.

The reason is no less important because parallax ads will generate a high CTR when the full size covers the screen.

If the desktop version will be very impossible to meet this condition. Is there an ad as big as a laptop screen?

This condition is easily met when the blog is opened on a small screen. The intended ad size is generally 300 x 600px. If opened on a mobile phone, this ad will completely cover the screen but in humane conditions and not overly. Google itself has ad types optimized for mobile devices, so stock 300 x 600px ads are there by default.

How to Make a Parallax Ad in the Middle of an Article

Okay, let's assume we agreed that the parallax ad in the middle of this post only appears on the mobile version to avoid crashing views. Now then we can move on to the next step.

I combined a parallax ad with a mid-article ad script to make the position even more unique.

1. Create a New Ad Unit


First of all, I recommend creating new AdSense ads instead of using existing ad units. The reason is because we'll be using a 300 x 600px Fixed ad.

You can also create Responsive ad units with Vertical dimension options.

2. Middle Article Parallax Ad Code

Next enter into the code section. Save the following Javascript BELOW <script> or <script type='javascript'>. This is the code for placing the element in the middle of the post, not for the parallax ad itself.

// Parallax Ads In Middle Post

(functions() {

   let ads = document. querySelector('.Parallax');

     if (ads) {

     let post = document. querySelectorAll('.post-body br, .post-body p'), x = parseInt(post.length / 2);

     if (post[x].nodeName == 'P') {

       post[x].parentNode. insertBefore(ads, post[x]);

     }

     else {

       post[x].parentNode.insertBefore(ads, post[x].nextSibling);

     }

   }

})();

Next, add the following parallax ad CSS code ABOVE </style> or ]]></b:skin>.


/* Parallax Ads In Middle Post */

.Parallax {

   displays: blocks;

   heights: 600px;

   margin: 1rem auto;

   position: relative;

}

.prlx1 {

   clip-path: inset(0 0 0 0);

   position: absolute;

   overflow: hidden;

   margins: auto;

}

.prlx2 {

   align-items: flex-start;

   display: flex;

   display: inline-flex;

   justify-content: center;

   position: fixed;

}

.prlx1, .prlx2 {

   bottom: 0;

   left: 0;

   right: 0;

   top: 10px;

}

.prlx1, .parallax ins {

   heights: 100%;

   width: 100%;

}

Finally, save the following HTML code BELOW <data:post.body/>. Replace those marked with the respective ad code.

<b:if cond='data:blog.isMobileRequest and data:view.isPost and !data:view.isPreview'>

   <!-- Parallax Ads In Middle Post -->

   <div class='Parallax'>

     <div class='prlx1'>

       <div class='prlx2'>

         <!-- Insert ad code here -->

       </div>

     </div>

   </div>

</b:if>

I use the Blogger conditional tag isMobileRequest so that the added elements only appear in the mobile version or when the blog is accessed using the parameter ?m=1

DONE! Save the template settings and see the result.

Are Parallax Ads Safe?

I've been posting this type of ad for more than 2 years (maybe 3 years anyway) and it's safe. No issues whatsoever. Because basically this is almost the same as an advertisement in the middle of an article which is vertical, but its position is "inside the fold" of the page blogs.

You can check the article Collection of Unique Positions for AdSense Ads to get other variations in an effort to increase CTR.

That's a complete guide for creating parallax ads in the middle of a Blogger article. Hopefully my writing can help a little

Dodi Maulana
All Because of Allah Ta'ala

Related Posts

Post a Comment