In this article we are going to be discussing how to add AdSense ads to Elementor. If you have a well followed website or blog that receives many visitors per day, you can probably monetize it using AdSense. However, there's not much information out there on how to add the physical ads into your Elementor blog posts, so that's what this article is going to discuss.

Manual Placement

To manually place your ads in Elementor, you can simply use the HTML element. Copy and paste the code that Google AdSense gives you into the HTML element, and that's where your ad will show up. This is probably the easiest method of adding Google AdSense ads into your Elementor website , and it gives you complete control over the placement.

From your Google ads dashboard, create a new ad unit, and copy the script that Google has generated for you.

You can then add the individual ad to your blog post template, or individual blog posts as you go.

Adding AdSense To Elementor Blog Posts

You can also go into your post, and edit it with Elementor. This will allow you to place the AdSense ads on a post by post basis.

Once the Elementor visual editor is loaded, simply click on the content, and in the text editor on the left sidebar, Paste the HTML code where you want the ad to display.

You can also do this from the Gutenberg block editor if you build your WordPress blog posts like that. By manually placing ads into individual blog posts, you can choose exactly where they show up, how many times they displayed, and more. You have complete control over the ads displayed on your website. However, this may take more time , and you may want to opt for something more automatic.

Adding AdSense To Elementor Single Post Templates

A step up from the completely manual placement into individual blog posts is adding AdSense to Elementor single post templates. A single post template will apply to every blog post in your Elementor website. Typically, you use it to build custom blog posts, designating where the header, featured image, and content will go.

Using the HTML element on Elementor, you can simply Paste the code into the element, and then position the element where you want the ad to display.

However, this means that the ad will not be in the actual content (You can put an element inside of the content block). Instead, it will need to be placed above, below, or beside it. In some use cases, this is extremely helpful, but in others, you'll need to go for the automatic placement method or the completely manual placement.

Automatic Placement

There are several well designed plugins that automatically inject Google AdSense ads into your WordPress post content. This not only saves you time, but optimizes the placement of your ads to get the maximum amount of clicks (leading to the most revenue generated). Because of this, automatic placement of Google ads into your Elementor website built with WordPress is a great idea.

To do this, you can use a plugin called Advanced Ads. It works well, and we have used it on client websites in the past. This plugin will automatically inject Google ads into the content. It has tons of advanced features that enable you to get the most money out of your Google ads placement. You can use A/B testing, it works on cached website, Lazy loading is enabled by default, and it has a bunch of other advanced features that you can read about here.

You simply install the plugin, connect your Google AdSense, and it should automatically insert ads into the content of your WordPress website.

To ensure that it works properly with Elementor, change the priority of the_content hook of Advanced Ads to something that is higher than Elementor’s priority (which is probably 9).

Issue With AdSense & Elementor

You may encounter some issues, which we want to run through here. Hopefully we can provide you the solution so you don't need to spend a long time diagnosing and troubleshooting.

Issue 1: AdSense Breaks Elementor CSS Styling

This topic was covered in detail here: https://wordpress.org/support/topic/Elementor-page-builder-causing-issues-with-google-adsense-blogs-on-live-pages/

This issue is probably caused by the setting “stretch this section to full width using JavaScript” being enabled. Elementor's use of JavaScript to complete this task clashes with the AdSense JavaScript, resulting in the entire website becoming broken. All you need to do is toggle this setting off, and you should be good to go.

Issue 2: Conflict between Elementor and specific types of ad codes

When the ad code uses JavaScript with document.write The preview doesn't work, and only the ad is displayed.

This means that you simply need to request an ad code that does not contain the document.write function.

Issue 3: Catchall issue with Elementor and AdSense

In some cases, AdSense simply does not work with Elementor. this is highly dependent on 3rd party themes and plugins that you are using in tandem with Elementor. Sometimes, it may be a better option to simply switch to a new ad network (like Media.Net, for example), dropping AdSense altogether. In this case, Advanced Ads would be a good way to test the compatibility of multiple ad networks.