Feature idea: inject .html include outside of form tag

Sep 29, 2014 at 5:47 PM
I have a very special case where I need to inject Google Analytics Tag Manager outside of the < form > tag. The only option I have is to add the .html include directly to the Default.aspx file.

I know this is a special case. But would that be a useful feature for anyone else? The ability to Inject HTML Include outside of the form tag?
Coordinator
Sep 29, 2014 at 5:53 PM
Do you want to inject this above or below the Form element?
Coordinator
Sep 29, 2014 at 5:54 PM
Also adding it to the head as the last element does not help you?
Sep 29, 2014 at 5:57 PM
In our case, we inject it between the body tag and the form tag (above the form tag). It's not meta content. It's actually a javascript provided by Google that only works when injected outside of the form tag.

Here is what we have:

< body id="Body" runat="server" >
<!-- #include file="ga.txt" --> < dnn:Form ID="Form" runat="server" ENCTYPE="multipart/form-data" >

And inside our ga.txt file is a script from Google. It's not just Google Analytics, it's something fancier.
Coordinator
Sep 30, 2014 at 8:06 PM
Adding this there is not as easy as it seems I think.
Would this work for you too?
<!-- #include file="ga.txt" --> </head>
< body id="Body" runat="server" >
< dnn:Form ID="Form" runat="server" ENCTYPE="multipart/form-data" >

You can already do that I think by using AddTohead.
I could add the option to add the content of a file.
Sep 30, 2014 at 8:23 PM
ga.txt consists of a < noscript > and a < script > tag. It's not a .js file.

The instructions from Google are very strict. The script is to be inside of the body tag but not inside of a form tag.
Coordinator
Sep 30, 2014 at 8:25 PM
OK, I'll see if it's possible.
Coordinator
Sep 30, 2014 at 8:26 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.
Coordinator
Sep 30, 2014 at 9:32 PM
Feb 19, 2015 at 1:27 AM
This puts the code between /head and before body ... should be between body and form
</head>
<!-- Google Tag Manager --> <noscript><iframe src='//www.googletagmanager.com/ns.html?id=GTM-XXXXXX'
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,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager --><body id="Body">


<fortyfingers:STYLEHELPER ID="SH2" runat="server" AddAfterBody="<!-- Google Tag Manager --> <noscript><iframe src='//www.googletagmanager.com/ns.html?id=GTM-XXXXXX'
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,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->" />
Coordinator
Feb 20, 2015 at 8:03 PM
I did a check and as far as I can see the stylehelper works correctly.

This:

<fortyfingers:STYLEHELPER ID="SH2" AddAfterBody="<!-- Google Tag Manager --> <noscript><iframe src='//www.googletagmanager.com/ns.html?id=GTM-XXXXXX'
height='0' width='0' style='display:none;visibility:hidden'></iframe></noscript>

Does inject the code inside the body element before the form. What did you use / can you post the stylehelper line you added to the skin?
Feb 20, 2015 at 10:52 PM
Here are the instructions from Google: https://developers.google.com/tag-manager/quickstart

"Paste this snippet into your website template page so that it appears immediately after the opening < body > tag."
<!-- 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,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
I just used the code the line you wrote today. Right now, the code is being injected before the body tag. I'll send you the screenshot.
Coordinator
Feb 21, 2015 at 11:55 AM
Ok, looked alright in Firebug, but it seems like it corrected the error for me. :-)
I see the issue now (using "view source")
I released a new version:
https://stylehelper.codeplex.com/releases/view/611879

BTW, I also changed the attribute name, example:

<fortyfingers:STYLEHELPER ID="SH2" AddToBodyTop="Body Top" AddToBodyBottom="Body Bottom" runat="server" />

Please let me know if it works for you.

Timo
Feb 23, 2015 at 5:45 PM
I got an error while installing the new package:

Package Installation aborted - 40FINGERS_StyleHelper:Cannot insert duplicate key row in object 'dbo.Packages' with unique index 'IX_Packages'. The duplicate key value is (Timo Breumelhof, 40FINGERS_StyleHelper, SkinObject, <NULL>, 2.8.7). The statement has been terminated.
Coordinator
Feb 23, 2015 at 6:06 PM
Hmmm.. I did changed the packaging and tested the install without problems, but I guess there is still some issue.
Sorry about that.
Did you install in DNN 6 or 7?
Feb 23, 2015 at 6:22 PM
7.3.4

Feb 24, 2015 at 7:14 AM
Edited Feb 24, 2015 at 7:18 AM
Installed new version https://stylehelper.codeplex.com/releases/view/611879 on DNN 6.2.6 works great as far as I can tell. Haven't tested yet if Google is getting data.
Note superfan's version with double quote doesn't work (GTM-xx" - need single quotes ... as you suggested.
Didn't test DNN 7

Either AddAfterBody or AddToBodyTop worked OK
Will reboot server soon - that is ultimate test!

</head>
<body id="Body"><!-- Google Tag Manager --> <noscript><iframe src='//www.googletagmanager.com/ns.html?id=GTM-XXXXXX'
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,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager --> Note you can use Google's version with double quotes in an html skin (not dnn) but not in dnn where you're passing it as a string?
Coordinator
Feb 24, 2015 at 3:16 PM
I tested in 7.3 and I was not able to reproduce dnnsuperfan's issue

But I did find out that DNN is cases sensitive when it comes to skin object names.
(I changed 40fingers to 40FINGERS).
So the 2.8.7 version is installed a a separate package not as an upgrade.

So I think jbarendr has two stylehelper skin object in his extension list now (which is what I ended up with)
This could also cause the issue dnnsuperfan had, I think.

I corrected that now:
https://stylehelper.codeplex.com/releases/view/611879

@jbarendr
Please do the following:
A. Uninstall the Stylehelper 2.8.7 you installed.
B. re-download the package
C. Re-install Stylehelper 2.8.7

@dnnsuperfan
Please try the new 2.8.7 package.

Please let me know if it works now.
Feb 24, 2015 at 4:54 PM
Works great. Thanks.
Coordinator
Feb 24, 2015 at 5:05 PM
Good to hear. Thanks for testing.