How to embed Google Adsense into your DotNetNuke - DNN - Website

If you’re running a DotNetNuke (DNN) based website, and you’ve wondered how to embed Google Adsense into your site, this tutorial is for you! There are a couple of options for adding Google Adsense code to your page, we’ll go through easy ways to do this.

1. You could buy a module from the DNN store, but that’ll cost you $$$ — why pay for something when you can do it for free?
2. You can add it to a page with the HTML Module
3. You can add it to a page using the Razor Module
4. You can embed it into the Module Settings of ANY module on a page
5. You can embed it into the Skin/Theme/Design of your pages.
6. With Auto Ads you can simply add it to the Page Header Tags in your site settings

For #1, we simply won’t go into the details of this one — why pay for it if you can do it for free — so definitely check out the other options below.

We’re going to use some sample Google Adsense code for this tutorial. You would obviously want to grab your own snippet from Google:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-3356074518164779"
     data-ad-slot="3947377955"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

You can add it to a page with the HTML Module

Adding Google Adsense to a page using the HTML module allows you one of the most flexible ways to add Ads to your site. One of the benefits of using the HTML module is that you can place the module, and thus the ads, in any Pane on your website.

To do this, follow these steps. You need to perform these steps, otherwise the Rich Text editor in DNN will strip out the Javascript before it saves!

1. Copy the Adsense Code for your Ad
2. Add a new HTML Module to a page
3. Make sure you are in Edit mode on the page (If not, mouse over the Edit Page option in the Control Panel, then click Edit This Page)
4. Mouse over the “Actions” menu for your module (the pencil) and choose Edit Content
5. When the Edit window for the HTML opens, you likely will have the WYSIWYG editor opened. You’ll want to switch to the Basic Text Box option
6. In the Basic Text Box mode, switch to the HTML Render Mode
7. Paste your Adsense code into the Module
8. Click on Save (be sure to publish if you are using Evoq)
9. Next time you edit an HTML module, switch back to the WYSIWYG editor

And you’re done! Want to display another set of ads in a different layout? Grab a new Adsense code snippet and add another module.

Cleanup

• After you’re done with the Adsense code, you likely will want to remove the “Container” from the Module:

  • Go to Module Settings
  • Click on the Page Settings tab
  • For the Module Container, choose either a “Blank” or “No Title” option for your theme (or uncheck the Display Container setting)
  • Click Update Settings

• The next time you go to edit another HTML module, switch back to the WYSIWYG editor before making changes.

You can add it to a page using the Razor Module

The Razor module is great for adding “scripts” to a page without having to change the WYSIWYG editor like you do with the HTML module. If you don’t have this module installed, install it first. Note: the module usually requires HOST/SuperUser access.

Steps to embed Adsense into the Razor Host module:

1. Add the Razor module to a page
2. Choose the Edit Script option from the Module Actions menu
3. Click Add New Script File
4. Name the new script Adsense1.cshtml
5. Click Add New Script
6. Choose the newly added _Adsense1.cshtml file from the dropdown menu
7. Paste your Adsense code into the Script Source box
8. Check the Is Active box
9. Click Save Script and Return
10. Access the Module Settings > Razor Host Module Settings tab
11. Choose your script from the dropdown list
12. Click Update

As with the HTML module, you may want to clean up the container for the module:

• Go to Module Settings
• Click on the Page Settings tab
• For the Module Container, choose either a “Blank” or “No Title” option or uncheck “Display Container”
• Click Update Settings

Bonus: Once added, you can reuse the Razor script on multiple pages. To customize layout, create additional scripts.

You can embed it into the Module Settings of ANY module on a page

If you already have a module on a page and want to add the Adsense ads before or after that content:

1. Click on Module Settings for the target module
2. Expand the Advanced Settings section on the Module Settings tab
3. Paste your Adsense code in the Header or Footer sections
4. Click Update

This will place the ad either before or after the module content. Try different containers to refine layout.

You can embed it into the Skin/Theme/Design of your pages

To embed Google Adsense sitewide, edit your site’s theme (skin) and include the snippet. This method ensures the ad shows on every (or most) pages.

Be sure to check out the next tutorial on editing a DNN Skin/Theme.

Copy and paste the AdSense code between <head></head> tags

Using Adsense Auto Ads makes this easy. Just paste the following into:

Site Settings → Site Behavior → PAGE OUTPUT SETTINGS → HTML Page Header Tags

<script data-ad-client="ca-pub-3356074518164779" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>