Complete Ad inserter Tutorial step by step

Ad inserter tutorial

Do you have a WordPress blog or website on which you intend adding ads? If yes is your answer, then, I guess you might have made some research on how to place ads on a WordPress blog/website and came across the use of Ad Inserter.

When it comes to adding Ads on your site, we recommend you use Ad inserter plugin. It is a very powerful plugin that helps you insert any type of ads from Google Adsense, sponsored ads to your custom Ads. It is really up to you. Without taking much time to let us get into the tutorial.

How to install ad inserter.

In order to install the Ad inserter plugin, follow the steps below:

  • First, hover over plugins and click on “Add new“. on the next page, search for “Ad inserter“.
  • After getting the Ad inserter plugin that you are looking for in the search result, click on “Install” then activate the plugin and that is how simple you can install Ad inserter.
how to install ad inserter
how to install ad inserter

Alternative way to install Ad inserter

Another method is to download the Ad inserter plugin from WordPress then upload and activate it.

In some rare cases, you may need to upload the plugin file manually via FTP or file manager in your cpanel. In case you have any problem in this regard, do well to contact us. We will be glad to assist you.

How to use the plugin

1. The setting

To make use of the plugin, please go to “setting” and click on “Ad inserter“. Another way is to go back to all plugins and click on the setting link of ad inserter. You will still have the same result.

Read Also:  Inline Related posts plugin tutorial

2. How to insert your AdSense code.

Are you running a blog? definitely, you might want to know how to inserter your Adsense codes into your posts and pages. To do so, follow the steps below.

log into your AdSense account and create a new ad unit in order to get the Adsense code. Follow the steps described in the snapshot below. In case you already have those ads units, click on get code.

ad unity creation in adsense account
How to create ad unity in adsense account

3. How to insert the Adsense code in Ad inserter

Quick reminder, to access the plugin, hover over setting and click on “ad inserter“.

Basically, the free version of ad inserter has 16 blocks meaning we can add up to 16 different ad units. Copy your AdSense code from your AdSense dashboard and paste in the first block as shown below.

pasting adsense code into ad inserter block
pasting adsense code into ad inserter block

The display setting

Ad inserter is indeed a great plugin that can help you place your ads wherever you want. You can choose to show your ad only on posts, static pages, homepage, search page or category pages or all at the same time, etc… it is up to you.

You can as well choose to add your ads to your content automatically or manually.

Let us first see how you can add your code automatically.

  • First, select the type of content you want your code to be added to. For example posts, static pages, homepage, etc … as displayed below in the snapshot.
Selecting the type on content
Selecting the type on content
  • Secondly, select the exact place you want the code to be added to. For example, you can decide to add your code “before post”, “before content” “after paragraph”, “After content” etc … as you can see in the snapshot below.
Select where you want the code to be displayed
Select where you want the code to be displayed

If you select before or after paragraph, you have to specify the paragraph number. For example, you can decide to add the code automatically after/before paragraph 2,8,10,20, etc … It is up to you. Make sure you separate those numbers with coma.

Making exception

Do you know that it is possible to add your ads to specific posts and/or hide them on other posts? You can do the same with the categories, tags, URLs, etc…  How can you do that? Let us show you.

First “list tab“, secondly click on either categories, tags, Post IDs etc …. depending on where you want to hide or display your ads. In the snapshot below, we used posts. After clicking on post IDs, you will get all the posts you have on your site. Select the one you want to show (white list) or hide (Black list). Make sure you save all the change you’ve made at the end.

Read Also:  Inline Related posts plugin tutorial
hide or show ads on spesific posts
hide or show ads on spesific posts

How to display the ad manually

To display your ads manually, you have three option. You can use a short-code that you copy and insert directly into your posts. To add the shortcode, make sure you are in text editor otherwise the ad will not show. You can as well add a block and select “Add shortcode element” and past your code there.

adding a shortcode
adding a shortcode

The second option is to use a PHP function to display the ad. This option is for web developers, and not for beginners. Avoid tampering with your core files to avoid site break down if you don’t have any knowledge on how to go about it.

Adding code manually
Adding code manually

Lastly, you can display the ads manually by heading over to widget and select “Ad inserter“, next select the block you want to display on the widget.

adding ads in the widget with ad inserter manually
adding ads in the widget with ad inserter manually

Hide or display ads based on device

It is also possible to hide or display your ads based on the device. To perform this action, click on the “device tab“, scroll down click on “client-side device detection“. Check “use client-side detection to” and check any type of device you want your ads to be displayed on.

hide or show ads based on devices
hide or show ads based on devices

How to display your ads on any part of your site.

In some cases, you may wish to display your ads in a particular area. Maybe before/after the header which by default you don’t. If that is the case, how can you add your code on any part of your site? the answer is simple. Here is what you can do.

1. First, find out the the ID or Class name of the Html element

To get the Id or the class name of the HTML element, click on the area where you want your ads to appear. In the snapshot below, we want the ads to appear before the text area (message box) of the contact information. That being said, we right click in the message area and we got the class name, so we right-clicked on the text and selected “Inspect element“.

Read Also:  Inline Related posts plugin tutorial
getting an HTML class
getting an HTML class

On clicking on “inspect element”, you will see at the right corner, the HTML content highlighted. You should be able to see the class name or Id there, copy it and go back to your ad inserter.

Paste the code in a block and select “add before HTML Element” at the bottom at “insertion”, then paste the class name or Id. remember to save all setting at the end.

The fastest way of getting an HTML element class or ID

First go to ad inserter setting, select “Add before HTML element and click on the “check”. You see another window in your browser open.

selecting the HTML element
selecting the HTML element
Getting the HTML element automatically
Getting the HTML element automatically

After you click on “USE”, the element class/Id will be inserted for you. Just save all changes and that is all.

How to add custom ads

To add your own ads, first, upload your banner and get its link. Secondly, you need to get the link of your landing page.

With those links, we can now easily generate the code.

[php]<a href="https://www.newdealonline.com/business/digital-marketing-business-nigeria/ "> <img border="0" alt="digital marketing" src="https://www.newdealonline.com/new_deal_is_all/2019/06/learn-how-to-make-money-online-banner-mobile.jpg" width="100" height="100"> </a>[/php]

Copy the code above and make the following changes

1. Replace https://www.newdealonline.com/business/digital-marketing-business-nigeria/ with your landing page URL.
2. Replace  https://www.newdealonline.com/new_deal_is_all/2019/06/learn-how-to-make-money-online-banner-mobile.jpg with your banner’s link.
3. Replace digital marketing with your own alt text. The alt text is the one displayed in case the banner (image) is not showing up.

Now that we have generated the code, go ahead and add the code in a new block. Follow the above instructions to display your ads wherever you want.

Misc

This section is meant for advanced users. You can choose to display immediately or delay it for as the case may be. Also, you can decide to show your ads on a post that has a minimum of “x” words with “x’ as the number of words.

Conclusion

So far we have discussed how we can use ad inserter to add ads on our blog or website. Indeed ad inserter is a great plugin to monetize our site. If you wish to get more blocks and enjoy other benefits, consider getting the pro version of the plugin. For more information about the pro version of the plugin, please visit their official site.

Recommended For You

About the Author: Aime

My name is Aime. I am an online entrepreneur, a professional web designer/developer, digital marketer. I love anything tech and business. If I am to choose one, I will go for tech because it is in the blood.

4 Comments to “Complete Ad inserter Tutorial step by step”

Leave a Reply

Your email address will not be published. Required fields are marked *