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.

 

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, that looks like the following. you would obviously want to grab your own snippet from Google for this:

<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 Rick 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 (what you see is what you get) opened. You’ll want to switch off of this 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 you will want to switch back to the WYSIWYG editor.

And you’re done! Want to display another set of ads, maybe in a different layout, grab some new adsense code, and get to adding another module!

Cleanup

  • After you’re done with the Adsense code, you likely will want to remove the “Container” from the Module
    • Go to the Module Settings
    • Click on the Page Settings tab
    • For the Module Container, choose either one of the “ Blank” or “No Title” options for your theme (you can also uncheck the “Display Container” setting.
    • Update the settings
  • The next time you go to EDIT another HTML module you likely will want to switch back to the WYSIWYG editor before making any text 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, be sure to install it first. Last I checked the module did require HOST/SuperUser access to use, so if you’re just a lowly admin, you might not find this useful. Here are your steps for getting your adsense into the Razor Host module in DNN.

  1. Add the Razor module to a page
  2. Choose the Edit Script option from the Module Actions menu
  3. Click on the Add New Script File button
  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 option
  8. Check the Is Active box
  9. Click Save Script and Return button
  10. Access the Module Settings for the module, choose the Razor Host Module Settings tab
  11. Choose your Script file from the dropdown list.
  12. Click Update

As with the HTML module you likely will want to “clean up” the container for the module.

  • Go to the Module Settings
  • Click on the Page Settings tab
  • For the Module Container, choose either one of the “ Blank” or “No Title” options for your theme (you can also uncheck the “Display Container” setting.
  • Update the settings

One advantage to the Razor module is that you can now place that same “script” on any page, without having to recreate it again. If you want to customize the “layout” of the ads though you will want to create additional scripts in the Razor module and apply those where you need them.

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

If you already have a module on a page somewhere with content, and you want to add the Adsense ads before, or after that content, you can follow these simple steps.

  1. Click on the Module Settings for the module you want to target.
  2. Expand the Advanced Settings section on the Module Settings tab
  3. Paste your adsense code in the Header or Footer sections of the module settings
  4. Click Update

This will put the adsense either before, or after the module. You might want to try out different Containers to control how this looks.

 

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

Finally, the way that you can embed your google adsense into a page, and ensure that it is on every (almost) page on the website, you can embed this HTML snippet into the Theme of your site. This will require you to Edit the Skin file. Be sure to check out our next tutorial for how to make basic edits to an existing Skin/Theme!