Setting Up ClickDimensions with Dot Net Nuke (DNN)

Setting Up ClickDimensions with Dot Net Nuke (DNN)

We are long time users of the integrated marketing tool ClickDimensions. We use ClickDimensions for, among other things, lead capture forms on our web sites so that when someone fills out a request form for more information about something on our site, we capture that information directly inside our CRM system. We have also recently migrated one of our web sites into the Dot Net Nuke (DNN) Content Management System. As part of that project, we needed to port our existing ClickDimensions lead capture forms into DNN. Standard lead capture forms in ClickDimensions are simple to deploy – basic HTML forms. But porting these into DNN presents the need to make some interesting changes to an otherwise simple form. These DNN-specific adjustments to the form aren't obvious, so below I'll describe how we got it working. It's very easy once you have the approach down.

Here is our starting page – a basic HTML form to capture contact information.


Here is the (slightly abbreviated) HTML behind the form. If you have worked with ClickDimensions before, you'll find this to match a typical basic ClickDimensions HTML form:

<form
method=post action='http://analytics.clickdimensions.com/xxxxxxxxx'>

<table
border=0>

<tr><td>First Name</td><td><input
name=firstname id=firstname class='field'/></td></tr>

<tr><td>Last Name</td><td><input
name=lastname id=lastname class='field'/></td></tr>

<tr><td>Company</td><td><input
name=companyname id=companyname class='field'/></td></tr>

...

<tr><td>&nbsp;</td><td><input
type=submit value='Register'></td></tr>

</table>

</form>

<code><span style="color: blue;">&lt;<span style="color: maroon;">script <span style="color: red;">type<span style="color: blue;">="text/javascript"&gt;</span></span></span></span></code>
<code><span style="color: blue;"> var<span style="color: black;"> cdJsHost = ((<span style="color: maroon;">"https:"<span style="color: black;"> == document.location.protocol) ? <span style="color: maroon;">"https://"<span style="color: black;"> : <span style="color: maroon;">"http://"<span style="color: black;">);</span></span></span></span></span></span></span></span></code>
<code><span style="color: black;"> document.write(unescape(<span style="color: maroon;">"%3Cscript src='"<span style="color: black;"> + cdJsHost + <span style="color: maroon;">"analytics.clickdimensions.com/ts.js' type='text/javascript'%3E%3C/script%3E"<span style="color: black;">)); </span></span></span></span></span></code>
<code>         </code>
<code><span style="color: blue;">&lt;/<span style="color: maroon;">script<span style="color: blue;">&gt;</span></span></span></code>

And at the bottom of the HTML page we had the standard ClickDimensions tracking code:

<code><span style="color: blue;">&lt;<span style="color: maroon;">script<span style="color: blue;"> <span style="color: red;">type<span style="color: blue;">="text/javascript"&gt;</span></span></span></span></span></code>
<code><span style="color: black;">   <span style="color: blue;">var<span style="color: black;"> cdAnalytics = <span style="color: blue;">new<span style="color: black;"> clickdimensions.Analytics(<span style="color: maroon;">'analytics.clickdimensions.com'<span style="color: black;">);</span></span></span></span></span></span></span></code>
<code><span style="color: black;"> cdAnalytics.setAccountKey(<span style="color: maroon;">'xxxxxxxxxxx'<span style="color: black;">);</span></span></span></code>
<code><span style="color: black;"> cdAnalytics.setDomain(<span style="color: maroon;">'xxxxxxx.com'<span style="color: black;">);</span></span></span></code>
<code><span style="color: black;"> cdAnalytics.trackPage();</span> </code>
<code><span style="color: blue;">&lt;/<span style="color: maroon;">script<span style="color: blue;">&gt;</span></span></span></code>

So in a typical deployment, the tracking code works together with the HTML form to produce a form submittal that ClickDimensions can track.

This syntax doesn't work when you simply copy and paste the code into a DNN page. There are 4 principal reasons:

  1. DNN doesn't allow <script> to be inserted into an HTML component for security reasons.

  2. DNN doesn't allow you to add a <form> to an HTML component on your page because a DNN page in itself, a form. (details here )
  3. Implementing the usual DNN workaround for the above causes DNN to submit extra data to ClickDimensions that ClickDimensions can't accept.
  4. Because of the structure of the DNN page itself, the usual tracking code approach won't work.

So let's work briefly through each of these 4 issues, and we'll have a working capture page hosted in DNN.

In advance, I've created a new DNN page with an HTML Component, and I've pasted the HTML form used in the original site (above) into a text editor.

  1. Using <script> in DNN:

    Since javascript is required to implement DNN, we need to insert some javascript. You can't paste <script> tags into the DNN HTML Component – it will be removed by DNN. The workaround is easy – open the Settings for the HTML Component, go to Advanced Properties, and paste your <script> component into the Header section. This will put your script into the form. We are going to be adding additional javascript here to solve issues 2-4, but as a starting point, just put the standard ClickDimensions tracking code, including the <script> and </script> tags, into the Header box for your HTML component.




  2. DNN and the <form> tag:

    As discussed in the above-referenced article, DNN doesn't allow the entry of form tags inside an HTML component. This is because the page itself is build by DNN to be a <form> already, and you can't nest forms. Since the page is already a Form, a Submit button on the page will only submit the page-level form, which is not wired in to ClickDimensions. So when we copy and paste our original HTML form into DNN, we need to do a couple of modifications:

    1. Remove the <form ….> and </form> tags from your HTML. We don't want to define a new form.
    2. Replace your <input type=submit value='Submit' /> tag (your submit button) with an <input type=button onclick='SubmitForm()' value='Submit' /> tag. This prevents the button from submitting the DNN form, and will allow us to specify what we want to happen upon button click via javascript, which we will define below.
  3. Extra data:

    The process we're underway on at this point is to rewire the existing DNN page form so that the page form gets submitted to ClickDimensions upon button click. But as a generic page form, there are properties embedded in this form that are not appropriate for ClickDimensions. These extra properties must be removed/changed in order for ClickDimensions to accept our form submittal. All of this is done inside our SubmitForm javscript method. Below is the code of that message and a line-by-line explanation.

SubmitMe = function() {

if(validate_form(this.form)){

this.form.encoding='application/x-www-form-urlencoded'; /*[1] overwrite the encoding type of the page form for compatiblity with ClickDimensions*/

this.form.action='http://analytics.clickdimensions.com/xxxxxxxxxxx'; /*[2] overwrite the destination of the page form for submittal to ClickDimensions*/  �

RemoveObject('RibbonBar.ascx_EditPage_SkinLst_Input'); /*[3] remove a field from the form that cannot be submitted to ClickDimensions*/

RemoveObject('RibbonBar.ascx_EditPage_SkinLst_ClientState'); /*[4] same as above*/

var cdAnalytics = new clickdimensions.Analytics('analytics.clickdimensions.com'); /*[5] setup ClickDimensions tracking code*/

cdAnalytics.setAccountKey('xxxxxxxxxxxx'); /*[6] same as above*/

cdAnalytics.setDomain('xxxxxxxxx'); /*[7] same as above*/

cdAnalytics.trackPage(); /*[8] same as above*/

this.form.submit(); /*[9] submit the form*/

}

}

I'll explain a little bit about each line and what it does:

  • Lines [1] and [2] address the first issue – they will overwrite properties of the original page form (changing the destination and the encoding) to make them mimic a generic HTML form submitting to ClickDimensions. This is the generic DNN workaround to adding your own form to a page.
  • Lines [3] and [4] will remove a couple of fields from the page form. These fields have html-syntax buried inside of them, and ClickDimensions will reject a form submittal with the fields as a security validation.
  • Lines [5]-[8] probably look familiar – these are the ClickDimensions tracking code. Putting them here instead of their default location will address issue 4, which I'll explain below.
  • Line [9] simply submits the page form, submitting all fields on the form to ClickDimensions. This includes our lead capture fields that we added to the script component.
  1. Tracking Code Approach:

    On a typical ClickDimensions HTML page, the tracking code is placed at the bottom of the page inside a <script> tag. But while we can include this in our page per step 1 by adding the <script> code to the HTML component header, there is a second issue. The ClickDimensions code, when embedded in a <scipt> tag, is running OnLoad – when the HTML page is initially loaded into the browser. Reverse engineering the ClickDimensions script indicates that the script works by scanning the document and looking for forms that are ClickDimensions forms – forms with a ClickDimensions URL for an ACTION. If the script finds such a form, it injects the necessary ClickDimensions tracking token into that form as a hidden field. But since we are using a generic form, and only changing the form ACTION when the Submit button is clicked, the script will not find a form to manipulate when the script runs OnLoad. So by moving that tracking code to be inside our SubmitMe function, we are enabling that logic to execute in the right order – looking for the form to manipulate right after we have set the ACTION of the page form.

    Bottom Line, then, is that you must use javascript to manipulate the page form's encoding and action, remove extra fields, and initiate ClickDimensions tracking code programmatically, and then must submit the form programmatically. All of this javascript should be defined in the Header of your HTML component. Inside the body of the HTML component should be text, layout, and the form fields themselves.   �

    The other thing we are doing in the full code which you'll see below is validating the form before submittal – making sure required fields are completed and that email addresses are in valid format, etc. The function validate_form as defined below will do all of that. We don't do any of the processing described above unless the user's input is valid.   �

    Hopefully this gives you a head start on implementing ClickDimensions inside a DNN environment. Once your first page is working, its quick and easy to copy that page into new capture forms. Below is the full javascript block (all of which goes in the Header of the HTML compontent) plus the HTML content (which goes in the content area of the HTML component).   �

    Good luck and happy CRMing!   �

Full Javascript Code:

<script type="text/javascript">   �

/* ---------------------------------------------- Form Validation */

<script>

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

{

alert(alerttxt);return
false;

}

else

{

return
true;

}

}

}


function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf("@");

dotpos=value.lastIndexOf(".");

if (apos<1||dotpos-apos<2)

{alert(alerttxt);return
false;}

else {return
true;}

}

}

function validate_form(frmWebCapture)

{

with (frmWebCapture) {

if (validate_required(firstname,"Please enter your First Name")==false) {firstname.focus();return
false;}

if (validate_required(lastname,"Please enter your Last Name")==false) {lastname.focus();return
false;}

if (validate_required(emailaddress1,"Please enter your e-mail address")==false) {emailaddress1.focus();return
false;}

if (validate_email(emailaddress1,"Please enter a valid e-mail address")==false){emailaddress1.focus();return
false;}

if (validate_required(companyname,"Please enter the name of your company or organization")==false){companyname.focus();return
false;}

}

return
true;

}


/* ---------------------------------------------- Form Cleanup Functions */

function RemoveObject(id)

{

try

{

var objToRemove = document.getElementById(id);

objToRemove.parentNode.removeChild(objToRemove);

}

catch(err) {}

}  �

/* ---------------------------------------------- DNN Submit logic */

SubmitMe = function() {  �

if(validate_form(this.form)){

this.form.encoding='application/x-www-form-urlencoded'; // overwrite the encoding type of the page form for compatiblity with ClickDimensions

this.form.action='http://analytics.clickdimensions.com/xxxxxxxxxxx'; // overwrite the destination of the page form for submittal to ClickDimensions  �

RemoveObject('RibbonBar.ascx_EditPage_SkinLst_Input'); // remove a field from the form that cannot be submitted to ClickDimensions

RemoveObject('RibbonBar.ascx_EditPage_SkinLst_ClientState'); // same as above
  �

var cdAnalytics = new clickdimensions.Analytics('analytics.clickdimensions.com'); // setup ClickDimensions tracking code

cdAnalytics.setAccountKey('xxxxxxxxxxxx'); // same as above

cdAnalytics.setDomain('xxxxxxxxx'); // same as above

cdAnalytics.trackPage(); // same as above


this.form.submit(); // submit the form

}

}


</script>

<script type="text/javascript">

var cdJsHost = (("https:" == document.location.protocol) ? "https://" : "http://");

document.write(unescape("%3Cscript src='" + cdJsHost + "analytics.clickdimensions.com/ts.js' type='text/javascript'%3E%3C/script%3E"));

</script>

HTML Code (note there is no <form> tag or submit button):

<code><span style="color: blue;">&lt;<span style="color: maroon;">table<span style="color: blue;"> <span style="color: red;">border<span style="color: blue;">="0"&gt;</span></span></span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">tbody<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;<span style="color: black;">First Name<span style="color: blue;">&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;&lt;<span style="color: maroon;">input <span style="color: red;">name<span style="color: blue;">="firstname" <span style="color: red;">class<span style="color: blue;">="field" <span style="color: red;">id<span style="color: blue;">="firstname" <span style="color: red;">type<span style="color: blue;">="text"&gt;&lt;/<span style="color: maroon;">input<span style="color: blue;">&gt;&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;/<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;<span style="color: black;">Last Name<span style="color: blue;">&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;&lt;<span style="color: maroon;">input <span style="color: red;">name<span style="color: blue;">="lastname" <span style="color: red;">class<span style="color: blue;">="field" <span style="color: red;">id<span style="color: blue;">="lastname" <span style="color: red;">type<span style="color: blue;">="text"&gt;&lt;/<span style="color: maroon;">input<span style="color: blue;">&gt;&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;/<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;<span style="color: black;">Company<span style="color: blue;">&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;&lt;<span style="color: maroon;">input <span style="color: red;">name<span style="color: blue;">="companyname" <span style="color: red;">class<span style="color: blue;">="field" <span style="color: red;">id<span style="color: blue;">="companyname" <span style="color: red;">type<span style="color: blue;">="text"&gt;&lt;/<span style="color: maroon;">input<span style="color: blue;">&gt;&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;/<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;<span style="color: black;">Email Address<span style="color: blue;">&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;&lt;<span style="color: maroon;">input <span style="color: red;">name<span style="color: blue;">="emailaddress1" <span style="color: red;">class<span style="color: blue;">="field" <span style="color: red;">id<span style="color: blue;">="emailaddress1" <span style="color: red;">type<span style="color: blue;">="text"&gt;&lt;/<span style="color: maroon;">input<span style="color: blue;">&gt;&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;/<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;<span style="color: black;">Contact Number<span style="color: blue;">&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;&lt;<span style="color: maroon;">input <span style="color: red;">name<span style="color: blue;">="telephone1" <span style="color: red;">class<span style="color: blue;">="field" <span style="color: red;">id<span style="color: blue;">="telephone1" <span style="color: red;">type<span style="color: blue;">="text"&gt;&lt;/<span style="color: maroon;">input<span style="color: blue;">&gt;&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;/<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;<span style="color: black;">Comments<span style="color: blue;">&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;&lt;<span style="color: maroon;">textarea <span style="color: red;">name<span style="color: blue;">="description" <span style="color: red;">class<span style="color: blue;">="field" <span style="color: red;">id<span style="color: blue;">="description"&gt;&lt;/<span style="color: maroon;">textarea<span style="color: blue;">&gt;&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;/<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;<span style="color: red;">&amp;nbsp;<span style="color: blue;">&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;<span style="color: maroon;">td<span style="color: blue;">&gt;&lt;<span style="color: maroon;">input <span style="color: red;">onclick<span style="color: blue;">="SubmitMe()" <span style="color: red;">type<span style="color: blue;">="button" <span style="color: red;">value<span style="color: blue;">="Submit"&gt;&lt;/<span style="color: maroon;">input<span style="color: blue;">&gt;</span></span></span></span></span></span></span></span></span></span></span></span></code>
<code><span style="color: blue;">&lt;/<span style="color: maroon;">td<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;/<span style="color: maroon;">tr<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;/<span style="color: maroon;">tbody<span style="color: blue;">&gt;</span></span></span></code>
<code><span style="color: blue;">&lt;/<span style="color: maroon;">table<span style="color: blue;">&gt;</span></span></span></code>

Microsoft Dynamics CRM Blog