Previous documented methods for using Adsense with DotNetNuke involved using a Google Adsense module or placing the Google Adsense code directly within a Text / HTML module. Both of these methods however are not easy to set up for a beginner DotNetNuke administrator. It is also not easy to blend Adsense in with the text content of the page using these methods, which is essential for achieving a good click through rate and earnings from Adsense.
So after some experimentation, I found an easy way to incorporate Google Adsense into the page while also making it easy for an administrator to choose which Google Adsense ads they wish to display. This is all done using CSS.
DotNetNuke Tutorial
In these 4 video tutorials (33 mins) we walk you through, step by step, how to integrate Google Adsense with DotNetNuke skins. We demonstrate how to incorporate Adsense into the
Free Simple Red Leaf CSS skin. You can see an example of the Adsense skin in action by watching the introduction video below. The code is available for download with the videos.
Introduction Video
The videos cover:
Video 1 - Introduction and demonstration
- Introduction to incorporating Google Adsense with DotNetNuke
- Outline of tasks:
- Easily choose what type of Adsense ad to display on the page, for example a square ad or banner ad
- Choose the location on the page for the adsense ad
- All adsense ads need to blend in with the text content of the page
- Example layouts to create
Time Length: 5min 8secs
Video 2 - Skin setup and Google Adsense setup
- Downloading the Simple Red Leaf Skin, setting up and opening in Visual Web Developer Express
- Logging into Google adsense and creating the adsense code
- Creating the first adsense skin with the Google banner ad above the main content
- Viewing the adsense skin and introduction to the Google Adsense left square layout
Time Length: 8min 51secs
Video 3 - Adding Adsense square ads and blending with the text
- Creating a Google Square Left Adsense Container, where the text wraps around the Google ad
- Adding the clear class
- Viewing the Google Adsense left container
- Further explanation of the clear class and a demo view of a page without the clear class
- Creating the Google Square Right Adsense Container
Time Length: 9min 52secs
Video 4 - Adsense coloured containers and banner ads
- Viewing the adsense right container
- Creating the Google Square Left Adsense Coloured background Container
- Viewing the Google Square Left Adsense Coloured background Container
- Creating the Google banner ad in the middle of the text content
- Viewing the Google banners ad in the middle of the text content
- Conclusion
Time Length: 8min 58secs
Total Time Length: 32min 49secs