Web Forms and Javascript, Oh My!

My work day has been filled with Sitecore work lately. From the Online Marketing Suite to the SEO Toolkit to Web Forms for Marketers, I’m starting to get dizzy. The other day, I was given the task to figure out a way to execute a javascript function after submitting a web form using the Web Forms For Marketers module for Sitecore.  Predefined actions (register a goal, send an email, add to the database, etc.) are easy as pie to use, but what about adding our own custom action?  Not to worry, we can do that.  The downside?  It’s a C# function.  So how is that going to help us run some javascript??

As you probably know, Google services like AdWords and Analytics use a small javascript snippet to track information about your users. Web Forms For Marketers (WFFM) uses Sitecore’s content management system to give a simple way of creating and placing a form on your website for anything from subscribing to the site’s newsletter to a contact form, and everything in between. Today, I needed to add an AdWords conversion tracking code to the page, but only after a web form had been submitted. In other situations this is easy, but since the web form is rendered on the page by Sitecore I had no way of touching it as a normal ASP.NET object. Instead, I had to write my own Save Task for WFFM. While this sounds like a simple enough task, it took several moving parts and they all needed to gel just right to get the desired result.

First, I had to create the new save task for Webforms to access in Sitecore. There are already a bunch of these that come shipped with WFFM.  They’re tasks like Save to Database, Send Mail, Subscribe to Target Audience, or it can be tied to the OMS by registering a campaign or completing a goal.  After traversing to the save tasks for Webforms (Content Editor -> System -> Modules -> Web Forms For Marketers -> Settings -> Actions -> Save Actions) I just had to do a quick right-click -> Insert -> Save Action. Voila, I have my new save action. But now, I need to give it functionality!

For this part, I had to go over to my project in Visual Studio. Web Forms is set up that you can define the C# class you want tied to the new save action, but it does have to abide by a few rules. First, it needs to extend the Sitecore.Form.Core.Client.Data.Submit.ISubmit class. This library is added to your project files when you install the WFFM module.  Before you can start accessing it, don’t forget to reference the .dll file in your project.  Since I’m extending this class, I need to override the Execute function for that class, which is where I’m going to stick the code to run on the submit of our web form.

using Sitecore.Form.Core.Client.Data.Submit;
public class GoogleAdWordsScript : ISubmit
{
     public virtual void Submit(ID formid, AdaptedResultList fields)
     {     }
}

Once I had this class defined and compiled, I needed to tie it to my Save Action in Sitecore. Back at my custom save action in Sitecore, there are two fields that need to be filled: Assembly and Class. The assembly is the namespace in which I defined my new C# class in, and the class is the name of the class.  You’ll need the namespace and the classname in the Class field for this to work correctly.  Once I had these filled out, I can add this action to my web form submit actions, but it’s not going to do anything for me just yet.  But now that I have the building blocks laid for my new functionality, I can actually write the functionality!

So the problem I had was finding a way to add a javascript snippet onto our page only after the web form is submitted.  The snippet I’m using is the Google AdWords conversion tracking code, which is an in-line snippet and a code reference that needs to be on the page for Google to do its magic.  In order to add javascript to my ASP.NET object, I used the RegisterStartupScript function on the ClientScriptManager of our page. I know what you’re thinking, ‘Woah, woah, what are these? Too fast.’ Okay, baby steps.  First, let’s get my page object so I can add javascript to it.

Page page = HttpContext.Current.Handler as Page;

This line will get the currently running page as an object so that we can add code to it. Now we can add a javascript function with the ClientScriptManager so that it renders with the rest of my page. We’re going to add our javascript using the ClientScript property on the ClientScriptManager. In case you don’t know, Google AdWords conversion tracking is slightly complicated. There are three moving parts: the conversion arguments for your account, the script reference to their javascript code, and the

I did the arguments first. This is straight javascript, so I can use the RegisterStartupScript function.  This function will add all of the code into my page, but I need a couple arguments first:

string googleAdWordsArguments = @"var google_conversion_id = 1234567890;
var google_conversion_language = ""en_US"";
var google_conversion_format = ""1"";
var google_conversion_color = ""666666"";
var google_conversion_label = ""Purchase"";";
page.ClientScript.RegisterStartupScript(this.GetType(), "myID", googleAdWordsArguments, true);

The first parameter, this.GetType(), gives the Type of the current instance. This includes information about the page object, including the namespace, name, assembly, etc. So, if you have any questions about the Assembly and Class fields on the Sitecore object, this is where you find your answer.

The next parameter, “myID”, is the key of the script I’m adding. This doesn’t show on the front-end, but the ScriptManager uses it for organizing multiple scripts. Each script you add needs to have a unique key, otherwise the ScriptManager sees them as duplicates.

The next argument is the javascript code I want run, sans script tags (that means without ““). The script tags are handled by the next argument – true wraps the code in script tags, false does not.

Next, I need to reference Google’s javascript code so that the conversion will actually work. If this was a normal page, this is simply:

But again, I have to insert this line only after the web form is submitted using C#. Simple – RegisterClientScriptInclude will do that for me.

page.ClientScript.RegisterClientScriptInclude("myID2", "http://www.googleadservices.com/pagead/conversion.js");

The two arguments are the key for the client script (which needs to be unique like we talked about earlier!), and the source of the script I want referenced. That’s done.

Finally, I need to add the noscript section for browsers blocking javascript. This is where is gets a little complicated. Since the noscript section is technically HTML, I need to use javascript to insert the HTML into the ASP.NET page. I have an HTML image object pointing to Google’s conversion code page, which is inside a set of

I’ll make the

string insertScript = "";
insertScript += "var noscript = document.createElement('noscript');";

Next, I need to add the img object to the

insertScript += "noscript.innerHTML = """";

Now that I have the

insertScript += "document.getElementsByTagName('body')[0].appendChild(noscript);";

Keep in mind that the last three lines I wrote are javascript, and needs to run after the web form is completed.  One last call to the ClientScriptManager:

page.ClientScript.RegisterStartupScript(this.GetType(), "myID3", insertScript, true);

Now, once a user finishes the web form, the javascript will use the conversion arguments or the

« Prev Article
Next Article »