Digital development, marketing automation, demand generation, online marketing, web development, digital marketing, email marketing, freelance, eloqua, salesforce, netsuite, melbourne, australia

While on assignment with Intel Australia I was given the task to tidy up their product download ordering system. The ordering system included a product rating system. The rating system is a great tool to add to your download reports. Determining the popularity of a document based on downloads and ratings.

The solution that was used was something I had not seen with any other Eloqua clients and showed innovation in the usage of Eloqua and jQuery.

After cleaning up the way it was done I decided to share it with other Eloqua users.

The jQuery plugin that was used in this http://www.fyneworks.com/jquery/star-rating/.

It’s a simple enough plugin, however without a database the results cannot be maintained for new and returning visitors. To enable the average results to display when a user returns to the page the results can be saved to Eloqua and returned using a simple web lookup.

Let’s take a look.

I have created an example version here http://www.codeevolution.com.au/sample/

There are plenty of ways to go about the storing of values and in the example below I decided to use the prospect record.

1). Create the fields necessary to maintain the required data.

I chose to save 3 fields per product/document. I also chose to prefix the 3 fields with the product name. You could chose to save only 2 fields depending on how many prospect fields you have available and how many products/documents you are rating. I liked the idea of 3 as the monthly reports would require no manual calculations.

Count: The total amount of times the rating was clicked
Total: The total of all ratings combined
Average: The average rating (Total/Count)

2). Create a dummy prospect (requires a dummy email address).

We will continue to overide this prospect every time with the new values submitted by the blind form submit.

3). Create a form to capture the rating.

The form is really simple and it only requires one processing step (Update Existing Record or Data Object). The processing step needs to save the ratings for a specific product. Each product does not get rated at the same time so the fields need to only update if there is value passed through the form.

4). Create the web data lookup.

The web lookup will simply use the dummy prospect record to return the fields from the prospect record which contain the data.

The code.

The code sample is reasonably straight forward. You can get an idea how you may retro fit this for your own documents/products. Let’s take a look.

1). The product html.

The html below shows I have included the three hidden fields for the product as well as the 5 hidden fields for ratings.

<div class="product">
<div class="label">Rate Document 1:</div>
<div class="rating"><input id="product1_count" type="hidden" name="product1_count" />
<input id="product1_total" type="hidden" name="product1_total" />
<input id="product1_average" type="hidden" name="product1_average" />
<input class="star" type="radio" name="product1" value="1" />
<input class="star" type="radio" name="product1" value="2" />
<input class="star" type="radio" name="product1" value="3" />
<input class="star" type="radio" name="product1" value="4" />
<input class="star" type="radio" name="product1" value="5" /></div>
</div>

2). The data lookup scripts.

The data lookup scripts are pretty straight forward. When the page loads the lookup is performed usimg the web data lookup key and the email address of the dummy user. The data returned is passed into the hidden fields and the average checkbox/star is checked.

<script type="text/javascript" src="elqNow/elqCfg.js"></script><script type="text/javascript" src="elqNow/elqImg.js"></script>
<script type="text/javascript">
// <![CDATA[
>var elqPPS = '50';

var elqDLKey = escape('d0c4544a541d4e8cb1cd633ed886629a');

var elqDLLookup = '<P_EmailAddress>rating@codeevolution.com.au</P_EmailAddress>';
// ]]>
</script>
<script type="text/javascript" src="elqNow/elqCPers.js"></script><script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
	   $('body').append('<iframe id="my_iframe"></iframe>');
	   rating1=Number(GetElqContentPersonalizationValue("P_Product1_Average1"))-1;
	   $('input[name=product1]:eq('+rating1+')').attr('checked', 'checked');
	   $("#product1_average").val(GetElqContentPersonalizationValue("P_Product1_Average1"));
	   $("#product1_count").val(GetElqContentPersonalizationValue("P_Product1_Count1"));
	   $("#product1_total").val(GetElqContentPersonalizationValue("P_Product1_Total1"));
	   rating2=Number(GetElqContentPersonalizationValue("P_Product2_Average1"))-1;
	   $('input[name=product2]:eq('+rating2+')').attr('checked', 'checked');
	   $("#product2_average").val(GetElqContentPersonalizationValue("P_Product2_Average1"));
	   $("#product2_count").val(GetElqContentPersonalizationValue("P_Product2_Count1"));
	   $("#product2_total").val(GetElqContentPersonalizationValue("P_Product2_Total1"));
});
// ]]>
</script>

3). The star rating system.

The star rating system needs to be included with some tweaks to what happens when the user clicks on a star. The rating system cosists of 3 files.

A css file – Left unchanged
A star.js file – Left unchanged
A javscript file – Minor tweaks.

The biggest modification that was required was to the rating javascript file. It required an onClick event to pass the rating to Eloqua via a blind form submit. I decided the simplest way to do this was placing an iframe on the page and changing the iframe src to the Eloqua form.

.click(function(){

var current_name = $(this).attr("name");

var current_rating = $(this).attr("value");
count=Number($("#"+current_name+"_count").val())+1;
$("#"+current_name+"_count").val(count);
total=Number($("#"+current_name+"_total").val())+Number(current_rating);
$("#"+current_name+"_total").val(total);
average=Math.round(total/count);
$("#"+current_name+"_average").val(average);

var post = current_name+"_count="+count+"&"+current_name+"_total="+total+"&"+current_name+"_average="+average;
$('#my_iframe').attr('src','http://now.eloqua.com//e/f2.aspx?elqFormName=YourForm&elqSiteID=1111&EmailAddress=rating@codeevolution.com.au&'
+post);
$(this).rating('fill');
$(this).rating('focus');

return >false;
});

The end result looks great and also provides us with some great reporting stats to go with our download reports