Branding SharePoint

Recently I was given the task of figuring out a way to drive more traffic towards a particular campaign. There are many ways of doing this: email marketing, social media, seo, etc. But the real issue is not just driving people to the campaign but understanding the conversation rates. That is where the real success is at.

As part of the campaign I decided it would be nice to have potential clients sign up for the service we are trying to offer. The original version of this sign up process was quick and dirty; click on a graphic and the user sends an email. There is no way to really track this with Google Analytics. What would be ideal is if I could set up a goal in GA and watch the user step the process and eventually get to a Thank You page at which point I can call it a conversion.

Here is a step-by-step process on how I set this up.

First, I created a custom list in the section of the site that contains the campaign information.

After the list is created, I added the columns/fields I would like to show up in my sign up form:

I also changed some of the settings on the list itself so users cannot see other entries, disabled attachments, etc.

Once the list is set up the rest of the work is done in SharePoint Designer. In SPD, I connect to the website and create a new page from the master page. Right click the master page you want and choose “New from Master Page”. At this point, I click save and save the file in the correct folder.

You will want to add the content placeholder so you can maintain the styles that surround the main content area. This is where you will insert the data view for your custom list.

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

Put your data view here….

</asp:Content>

Once you have this, insert your cursor between these tags and click, Insert > SharePoint Controls > Data View. This will open the Data View in the right panel area:

In the SharePoint lists area, you should see the custom list you created. In my case it is SharePoint2010-SignUp. Click on your custom list and choose “Show Data”. This will show you all the columns that are associated with the list. Including any custom ones you created. Control + Click the columns that you would like and choose “New Item Form” from the drop down menu labeled “Insert Selected Field As”

This will insert the xlst into your code for the data view. You can click the design view to see how it is going to look. If you feel comfortable with HTML & CSS, you can edit the form fields and elements to meet your design needs.

Almost done. I don’t like the fact that the button says “save”. The user doesn’t think they are saving anything rather they are submitting this form. In code view search for value="Save" and change this to value=”Submit”. One final step, probably the most important, is sending this form to the thank you page when it is submitted. To do this, you will need to find the new Submit button (which was just changed) and update the javascript to have a redirect. The code should look like this:

Before:
<input type="button" value="Save" name="btnSave" onclick="javascript: {ddwrt:GenFireServerEvent(‘__commit’)}" />

After:

<input type="button" value="Save" name="btnSave" onclick="javascript: {ddwrt:GenFireServerEvent(‘__commit;__redirect={thankyou.aspx}’)}" />

Now the only thing we need to do is create the Thank You page. You can follow the same process as above, choose a master page and create a new page from the master page and name it ThankYou.aspx. Place it in the same location as the Sign Up page that you created.

There, now you should have a working “form” that submits new information to a SharePoint list. You can set up alerts on the list so you can get notified when anyone submits information. In Google Analytics you can set up a Goal with the conversion happening on the ThankYou.aspx page. Good luck and happy tracking!