Hinterlasse einen Kommentar

Integrating the Google Tag Manager (GTM) into DNN

Google has an awesome scripts-management engine called GTM (Google Tag Manager). Though it talks about managing tags, in reality it actually manages script-integration. Particularly Google-scripts (like Adwords and tracking stuff), but also jQuery and similar.

How does it work? In general you create a „set“ of „tags“ (read: scripts w/parameters) in a web-interface provided by google. Then you integrate that set with some iFrame/Script-HTML-snippet in your layout. If one day you would like to add another tag or change the tag-integration-rules, you do this on the GTM-System, without having to modify your page. Note that the GTM-System also allows various rules, like automatically integrating different scripts depending on the page that is being viewed; adding custom parameters etc. – very powerfull.

The integration is a bit tricky with DNN, because it uses an iFrame which must be added right after the tag and before the default tag.

To learn more about GTM, visit the Google Tag Manager website.

To integrate your tag, use this snippet in your default.ascx (remember to replace the xxxx with your code). Note: this works with DNN 6+ and 7+.

 

<script runat="server">
     protected override void OnInit(EventArgs e)
     {
         base.OnInit(e);
         var tp = (CDefault)Page;
         tp.FindControl("Body").Controls.AddAt(0, new Literal() { Text = "<!-- Google Tag Manager --><noscript><iframe src='//www.googletagmanager.com/ns.html?id=GTM-XXXX'height='0' width='0'style='display:none;visibility:hidden'></iframe></noscript><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'scr" + "ipt','dataLayer','GTM-XXXX');</scr" + "ipt><!-- End Google Tag Manager -->" });
           
     }
 </script>

By the way – the easiest way to test and use this is by trying the DNN App for GTM I created.

Über iJungleBoy

Missionary Kid, Entrepreneur, Software Developer, DotNetNukeer, SharePoint-Fanatic and InfoPath-Lover.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: