Are you struggling to earn revenue from your website? AdSense, a popular advertising network, allows you to easily display targeted ads on your website. With each click, you can earn income. However, it can be challenge task to get clicks on those ads.
This article will guide you on how to maximize your revenue by placing AdSense ads on your website using HTML caller tags. Follow our step-by-step tutorial to get started.
Table of Contents
What is HTML Caller Tags
HTML caller tags are elements used in HTML to apply specific styles or functionality to certain sections, class or special IDs of a web page. For instance, you can use it like this:
<div class="ad"></div>
This is just one example. You don't always need to use tags, and it's not necessary to use the div tag along with class or ID.
Benifit & Advantage
If you have added caller tags in multiple articles but decide to remove them, don't worry about the appearance of the article since the browser will interpret it as an empty HTML tag with no content. There will be no negative impact on the appearance of your article.
Add Caller Tags Script to Place Adsense Ad
Here is the script for effectively placing AdSense ads on Blogspot (Blogger) and WordPress using a special caller tag. Follow the instructions below to get started.
How to Setup Ads
This code has a great feature that allows you to insert various Adsense ad units instead of just one repetitive ad. Suppose you have multiple ad units like banner, middle, and parallax in your Adsense account. With this code, you can easily choose and display any combination of these ads using this code.
Step 1: First of all Login to your Adsense Dashboard.
Step 2: On Adsense Dashboard, click Ads.
Step 3: Click the By ad unit menu next to the 'By site' option.
Important!
You can choose desired ad unit form Existing ad units
Step 4: Choose any of the ad type i.e Display ads, or In-article ads etc., you will be redirected to the editing page.
Step 5: Select your Responsive ad size, Square, Vertical, and Horizontal. Next type your Ad unit name, click Create button.
Step 6: Next You will redirect to Code generator page, copy only the below section of ad unit script (see below code).
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-000000000000000"
data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Generator Parse Text
Step 7: Convert above script to parse text. You can our Parse convertor tool.
Step 8: Once you parsed, DELETE any remaining space between characters.
Step 9: Repeat if you want to use multiple ad units.
Step 10: Save this code. Later we will insert it in the Javascript below.
Add CSS Style
Important! Before we begin adding codes to XML, I highly recommend taking a backup of your theme. If any issues arise, you can easily restore it later on.
Step 11: Login to your Blogger Dashboard.
Step 12: On Blogger Dashboard, click Theme.
Step 13: Click the arrow down icon next to the 'Customize' button.
Step 14: Choose Edit HTML, you will be redirected to the editing page.
Step 15: Next search the </style> or ]]></b:skin> code and place the below css style just above the code.
You can use the search function (Ctrl + F or Command + F) to make it easier to find the code place.
.ad {display: block; margin: 1.5rem 0; text-align: center}
Add Javascript
This step is crucial in the AdSense ad calling script using thewebtrick's special tags. It is important to note that you should avoid making any changes (unless necessary) to prevent any errors from occurring.
Step 16: Now add the following JavaScript just above to </body> tag. If you don't find it, it is probably already parsed which is </body> or <!--</body>--></body>.
<script>//<![CDATA[
/* ----
+ Embed Ads With Tags by thewebtrick.com
+ Source code: https://www.thewebtrick.com/2023/07/embed-ad-tag-caller.html
---- */
((altqAdTag) => {
const ad = [
'Ad code 1 (parsed)',
'Ad code 2 (parsed)',
'Ad code 3 (parsed)'
];
const sf = (safe) => {
return safe
.replaceAll(/&/g, '&')
.replaceAll(/</g, '<')
.replaceAll(/>/g, '>')
.replaceAll(/"/g, '"')
};
const a = document.querySelectorAll('.ad');
if (a.length > 0) {
a.forEach((e) => {
const b = e.getAttribute('data-type'),
c = (() => {
if (b) {return b >= (ad.length + 1) ? 0 : b - 1} else return 0;
})(), d = sf(ad[c]); e.insertAdjacentHTML('afterbegin', d);
});
};
})();
//]]></script>
It's important to pay attention to which lines are marked. Replace each line with the ad code that was parsed in the first step. Here's an example where only 2 ad units are used.
After parsing, remember to remove any remaining spaces to ensure that all the code is integrated seamlessly.
const ad = [
'<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxx" data-ad-slot="1234" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>',
'<ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-xxxx" data-ad-slot="5678"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>'
];
Step 17: Save the changes by clicking on this icon
How to Use
To start displaying your ads, use the following HTML tag and place it wherever you want to display the ad. It can be in various places such as articles, sidebars, banners, etc. You can also use this tag multiple times if needed.
Step 18: Open the HTML view of your blog post editor.
Step 19: Copy and paste the following HTML codes.
<div class='ad' data-type='1'></div>
Important!The "data-type" attribute specifies which ad unit has been called. Now that we have input the parsed ad code, the ads that will be displayed will depend on where the code is placed on the page.
Here's an example of what the ad code looks like:
const ad = [ 'Ad code 1 (Banner)', 'Ad code 2 (Middle)', 'Ad code 3 (Parallax) ];
Next, you will need to write the HTML code in this format:
<div class='ad' data-type='3'></div>
Just to clarify, the 3rd ad unit that is specified in the ad code will be displayed, in this case is the parallax ad. If you have any questions & feedback related this post, then ask us in .
Condition
This script has been designed in a way that ensure that it does not cause any harm or damage to your blog design. There are several conditions that make this script safer.
- If you forget to write the attribute
data-type, it will automatically show the first ad unit caller tag. In such cases, it is completely safe to write the calling HTML tag like this:
<div class='ad'></div>
Similarly, if the number specified for the attribute 'data-type' is greater than the total number of ad codes written, the first code condition will be show. Therefore, it is important to note that the first code will be used in this scenario.
That's it! By following these steps and adding the provided HTML codes, you'll have a neatly Place AdSense Ads using HTML Caller Tags in your blog posts.
Conclusion
That's all here for Today! This is the only method you need to insert an ad using a caller tag code. It may seem complicated due to the process of parsing the ad code, but in reality, it is a straightforward and hassle-free process. I have kept the code as minimal as possible to simplify the whole experience.
This is all about Place AdSense Ads using HTML Caller Tags for Blog Posts. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in .