Fork me on GitHub
DNN Apps - Demo-Zone
Discover DNN-Apps - simple and elegant, easy to customize
You are here: Home  >  Apps  >  Google Tag Manager

Demo of the Google Tag Manager DNN-App

Demo of the Google Tag Manager DNN-App

This page contains the Google Tag Manager app. To see that it works, look at the source code of this page!

Download the GTM DNN App in the 2sxc App Catalog.

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value
GTMCode System.String GTM-Demo-Fake-Id

Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.

Template file

    // Use either the specified GTM-Code or revert back to the one in the App-Settings
    var gtmCode = (Content.GTMCode == "") ? App.Settings.DefaultGTMCode : Content.GTMCode;

    // assemble the GTM-String
    var gtm = "<!-- Google Tag Manager --><noscript><iframe src='//"
    + gtmCode 
    + "' 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='//'+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'scr" + "ipt','dataLayer','" 
    + gtmCode 
    + "');</scr" + "ipt><!-- End Google Tag Manager -->";

    // Attach the event to add the code in the SaveStateComplete
    // ...this is necessary, because in the current event (Render) it's not allowed to change the object tree of the page controls
    System.Web.UI.Page page = HttpContext.Current.Handler as Page;
    page.SaveStateComplete += (e, sender) =>
        var body = page.FindControl("Body");
        body.Controls.AddAt(0, new System.Web.UI.WebControls.Literal() { Text = gtm });
2serve . 2invent . 2create is 2be.