Documentation

Table of Content

Introduction

Thanks for choosing DNN Google Tag Manager by weweave! DNN Google Tag Manager lets you integrate Google Tag Manager into your DNN portal without any coding by following Google’s best practices.

If nothing else is stated, this documentation refers to the latest available version of DNN Google Tag Manager.

Requirements

In order to use DNN Google Tag Manager, make sure your environments meets the following requirements:

Installation

Please follow these steps to set up DNN Google Tag Manager:

For version 03.XX.XX

  1. Download DNN Google Tag Manager from the download page.
  2. Log in to your DNN installation as host admin and select “Settings > Extensions” in the Persona Bar.
  3. Select “Install Extension” and follow the installation process.
  4. Press F5 or reload the page, to show the new Persona Bar entry “Settings > Google Tag Manager”.
  5. For each of the affected portal, enter your Google Tag Manager Container ID and your license key under the new Persona Bar entry “Settings > Google Tag Manager”

For version 02.XX.XX and 01.XX.XX

  1. Download DNN Google Tag Manager from the download page.
  2. Log in to your DNN installation as host admin and navigate to “Host > Extensions”.
  3. Select “Install Extension Wizard” and follow the installation process.
  4. After a successful installation you should see two new menu items: “Google Tag Manager under “Admin” and “Host”. The portal-specific configuration can be performed under “Admin > Google Tag Manager”, whereas the global configuration can be performed under “Host > Google Tag Managerd”.
  5. Enter your Google Tag Manager Container ID for each of the affected portals under “Admin > Google Tag Manager”.
  6. Enter your license key under “Admin > Google Tag Manager” and check the “Enable-checkbox”.
  7. Google Tag Manager integration is now enabled automatically.

Upgrading

Please follow these steps to upgrade your existing DNN Google Tag Manager module installation:

  1. Download the latest version of DNN Google Tag Manager for your DNN version from the download page.
  2. Make sure that your license key is still valid before performing the upgrade.
  3. Log in to your DNN installation and go to “Host > Extensions”.
  4. Select “Install Extension Wizard” and follow the process.

Portal Configuration

The actual configuration of DNN Google Tag Manager is performed portal-specific under “Admin > Google Tag Manager”.

Basic Settings

  • Enable: Check to enable the Google Tag Manager integration
  • Container ID: Your portal’s Google Tag Manager container ID
  • Inject in 404 error page: Check to inject the Google Tag Manager snippet to DNN’s 404 error page
  • Inject <noscript> after opening <body>: Check to inject <noscript> tag after opening <body> tag; if unchecked the <noscript> tag is injected before the closing </body> tag (use this option with care as it could result in postback problems which break some functionalities in DNN)
  • Enable data layer: Check to inject the Google Tag Manager’s Data Layer JavaScript object (see here for more details)
  • License key: Your purchased DNN Google Tag Manager license key

Host Configuration

If you are the DNN Host Admin, you can go to /Host/Google-Tag-Manager to get an overview of your portal’s Google Tag Manager integrations. This is especially useful if you run multi-portal instances. As of now, there is nothing you can configure here – such options may follow in a future release.

Data Layer

If the portal specific option “Enable data layer” is checked an empty data layer object is injected:

dataLayer = [];

To add custom data to the data layer object, you can add a class that implements weweave.DnnGoogleTagManager.Extension.IDataLayerProvider to your backend code. A sample implementation looks like this:

public class SampleDataLayerProvider : weweave.DnnGoogleTagManager.Extension.IDataLayerProvider
{
  /// <summary>
  /// Updates the data layer
  /// </summary>
  /// <param name="request">Request to update the data layer</param>
  /// <param name="user">User to update the data layer (or null for anonymous requests)</param>
  /// <param name="dataLayer">Data layer to update</param>
  /// <returns>Updated data layer</returns>
  public Dictionary<string, string> UpdateDataLayer(HttpRequestBase request, UserInfo user, Dictionary<string, string=""> dataLayer)
  {
    dataLayer["key1"] = "value1";
    dataLayer["key2"] = "value2";
    // ...
    return dataLayer;
  }

  /// <summary>
  /// Priority of this IDataLayerProvider implementation; implementation with higher priority overrides implementations with lower priority
  /// data layer of implementation with lower priority
  /// </summary>
  /// <param name="request">Request to get the priority for</param>
  /// <param name="user">User to get the priority for (or null for anonymous requests)</param>
  /// <returns>Priority of this IDataLayerProvider implementation</returns>
  public int GetPriority(HttpRequestBase request, UserInfo user)
  {
    return 1;
  }
}

The module automatically creates new instances of all defined IDataLayerProvider implementations and calls UpdateDataLayer(…) in the order of the providers’ priorities to get all data for the data layer.

Customize <script> and <noscript> tags

The module takes care of rendering the necessary <script> and <script> tags into the HTML code of the page. However, if you want to customize the rendered script, you can add a class that implements weweave.DnnGoogleTagManager.Extension.IScriptBlockDecorator to your backend code.
A sample implementation looks like this:

public class SampleScriptBlockDecorator : weweave.DnnGoogleTagManager.Extension.IScriptBlockDecorator
{
  /// <summary>
  /// Updates the script block that should be rendered
  /// </summary>
  /// <param name="request">Request to render the script block</param>
  /// <param name="user">User to render the script block (or null for anonymous requests)</param>
  /// <param name="scriptBlock">Script block to render</param>
  /// <returns>Updated script block</returns>
  public string RenderScriptBlock(HttpRequestBase request, UserInfo user, string scriptBlock)
  {
    // Modify the script block an return the modified version
    // ...
    return scriptBlock;
  }

  /// <summary>
  /// Updates the noscript block that should be rendered
  /// </summary>
  /// <param name="request">Request to render the noscript block</param>
  /// <param name="user">User to render the noscript block (or null for anonymous requests)</param>
  /// <param name="noScriptBlock">Noscript block to render</param>
  /// <returns>Updated noscript block</returns>
  public string RenderNoScriptBlock(HttpRequestBase request, UserInfo user, string noScriptBlock)
  {
    // Modify the noscript block an return the modified version
    // ...
    return noScriptBlock;
  }

  /// <summary>
  /// Priority of this IScriptBlockDecorator implementation; implementation with higher priority overrides implementations with lower priority
  /// </summary>
  /// <param name="request">Request to get the priority for
  /// <param name="user">User to get the priority for (or null for anonymous requests)
  /// <returns>Priority of this IDataLayerProvider implementation</returns>
  public int GetPriority(HttpRequestBase request, UserInfo user)
  {
    return 1;
  }
}

The module automatically creates new instances of all defined IScriptBlockDecorator implementations and calls RenderScriptBlock(…) and RenderNoScriptBlock(…) in the order of the decorators’ priorities to get the customized <script> and <noscript> tags.

Troubleshooting

Enabling debug logging

Add the following lines right before the closing “</log4net>” to the file DotNetNuke.log4net.config which you’ll find in your website’s root directory.

<logger name="weweave.DnnGoogleTagManager">
    <level value="Debug" />
</logger>

Debug output will be written into the log files in this directory: Portals\_default\Logs

Uninstalling

You can easily remove DNN Google Tag Manager from your DNN installation by navigating to “Host > Extensions”. Please select “Showing: Persona Bar” on the extensions page for version 03.XX.XX.