How to insert and embed Google Adsense code directly into blog articles and posts
Adsense offers two methods to insert ads in a site: Auto Ads and Ad Units to learn more about this topic please refer to: How Does AdSense Work?
To include an ad unit in the front-end text editor to be included on a post, please follow the steps below:
Breaking down the Ad Units code:
Adsense Ad Units code consists of two parts, the script and the inserted code:
The code marked in red uses <script> tags. It's not necessary to add these in the body of the post. This is a good thing since allowing <script> tags inside posts would open the site up for potential security issues.
This javascript part of this code can be added sitewide. Then each ad unit will display based on where the rest of the snippet of HTML code is placed.
1. Adding the Adsense Javascript:
To add the javascript portion of the Google Ad Unit to the body of your site use the Additional Footer Code section. Copy the sections of the code that are using <script> tags, then go to:
Settings > Design Settings > Additional CSS / HEAD > Additional Footer Code
Paste the code in the Additional Footer Section:
2. Allow <ins> Tags:
Before adding the rest of the Ad Unit on a post content it is necessary to allow the <ins> tags to be used in these sections. There are two advanced settings where this tag needs to be included. Go to:
Settings > Advanced Settings > and search for:
- Allowed HTML Tags
Add <ins> to the list of Allowed HTML Tags:
- Froala Allowed Empty Tags:
Add 'ins' to the list of Froala Allowed Empty Tags:
3. Ad the rest of the Ad Unit Code to the Post:
Once the tags are allowed it now is possible to insert the code in the Froala Editor of the post and save it. Go to your post content, and switch to the code view. There you can add the ad unit <ins> code:
IMPORTANT NOTE: Google may choose to not show ads to visitors based on geography and many other factors.
