Omniture SiteCatalyst

Sign-In widget integrated with Omniture SiteCatalyst via Events

The Widget

The Code

The widget fires several events throughout the login process which can be used to track login activity in your Omniture SiteCatalyst account. In this example we use the following events:

onProviderLoginStart
onProviderLoginError
onProviderLoginSuccess
onProviderLoginComplete
onProviderLoginToken (we are including this here to show the code but this event only fires when using client side login)
onReturnExperienceFound

We add handlers for each of these events in the janrainWidgetOnload function. Omniture provides two functions you can use after the page loads to record activity, t() and tl(). We will be using tl() because it does not cause a page view to be counted, but if you would like to count a page view for each login event t() will work as well, just keep in mind that if you attach a handler to each event you could end up counting an extra 5 page views per successful login. Our finished janrainWidgetOnload function looks like this:

function janrainWidgetOnload() {
    var submitOmnitureEvent = function(event, provider, linktitle){
        var s = s_gi(s_account);
        s.linkTrackVars = 'prop19,events,eVar19';
        s.linkTrackEvents = event;
        s.events = event;
        s.prop19 = provider;
        s.eVar19 = provider;
        s.tl(true, 'o', linktitle);
    };
    janrain.events.onProviderLoginStart.addHandler(function(response) {
        //event1
        submitOmnitureEvent('event1', response.provider, 'onProviderLoginStart');
    });
    janrain.events.onProviderLoginError.addHandler(function(response) {
        //event2
        submitOmnitureEvent('event2', response.provider, 'onProviderLoginError');
    });
    janrain.events.onProviderLoginSuccess.addHandler(function(response) {
        //event3
        submitOmnitureEvent('event3', response.provider, 'onProviderLoginSuccess');
    });
    janrain.events.onProviderLoginComplete.addHandler(function(response) {
        //event4
        submitOmnitureEvent('event4', response.provider, 'onProviderLoginComplete');
    });
    janrain.events.onProviderLoginToken.addHandler(function(response) {
        //event5
        submitOmnitureEvent('event5', response.provider, 'onProviderLoginToken');
    });
    janrain.events.onReturnExperienceFound.addHandler(function(response) {
        //event6
        submitOmnitureEvent('event6', response.returnProvider, 'onReturnExperienceFound');
    });
}

For each event we are calling the submitOmnitureEvent function to which we pass the name of the event, the provider the user is attempting to login with and a name for the link that was clicked. The submitOmnitureEvent function then creates a new s object by passing the global s_account variable in to s_gi(), and on that s object we set the variables we would like to track. We are tracking an event, and setting a traffic variable (prop19) and a conversion variable (eVar19) with the name of the provider, this will allow us to break down events by provider in SiteCatalyst. The tl() function actually stands for tracklinks and can be used to track file downloads and exit links, but here we are passing it a second argument of ‘o’ which is used when tracking custom links. The custom links setting allows us to repurpose this function to meet our needs.

Custom Success Events

SiteCatalyst allows you to create up to 100 custom events, here we are using event1 – event6, but you can set it up using any 6 events you like. In order to give your events friendlier and more useful names you will need to do some configuration in your SiteCatalyst account. You can find the setup for custom events by going to Admin -> Admin Console -> Report Suites -> Edit Settings -> Conversion -> Success Events. The screenshot below demonstrates the setup required for this example.

Traffic Variable

To give useful names to your traffic variable (prop19) go to Admin -> Admin Console -> Report Suites -> Edit Settings -> Traffic -> Traffic Variables as seen in the screenshot below.

Conversion Variable

To give useful names to your conversion variable (eVar19) go to Admin -> Admin Console -> Report Suites -> Edit Settings -> Conversion -> Conversion Variables.

Your new report suite ¶

Once you have configured your report suite, and logout and back in to SiteCatalyst, you should start seeing all these newly named variables show up in your report navigation.

You can now look at a report of how many times somebody has started the login process.

And you can break that down further and look at how many started with each provider.

The following code along with the Omniture code that you are required to add to every page is the minimum code you need to get this example up and running on your site. (Javascript in <head> runs asynchronously – will not slow page load.)

<!doctype html>
<html>
  <head>
    <script type="text/javascript">
      (function() {
       if (typeof window.janrain !== 'object') window.janrain = {};
       window.janrain.settings = {};

       janrain.settings.tokenUrl = 'http://examples.janrain.com/auth-widget/tokenurl.php';

       function isReady() { janrain.ready = true; };
       if (document.addEventListener) {
       document.addEventListener("DOMContentLoaded", isReady, false);
       } else {
       window.attachEvent('onload', isReady);
       }

       var e = document.createElement('script');
       e.type = 'text/javascript';
       e.id = 'janrainAuthWidget';

       if (document.location.protocol === 'https:') {
       e.src = 'https://rpxnow.com/js/lib/widget-examples-basic/engage.js';
       } else {
       e.src = 'http://widget-cdn.rpxnow.com/js/lib/widget-examples-basic/engage.js';
       }

       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(e, s);
      })();
function janrainWidgetOnload() {
  var submitOmnitureEvent = function(event, provider, linktitle){
    var s = s_gi(s_account);
    s.linkTrackVars = 'prop19,events,eVar19';
    s.linkTrackEvents = event;
    s.events = event;
    s.prop19 = provider;
    s.eVar19 = provider;
    s.tl(true, 'o', linktitle);
  };
  janrain.events.onProviderLoginStart.addHandler(function(response) {
      submitOmnitureEvent('event1', response.provider, 'onProviderLoginStart');
      });
  janrain.events.onProviderLoginError.addHandler(function(response) {
      submitOmnitureEvent('event2', response.provider, 'onProviderLoginError');
      });
  janrain.events.onProviderLoginSuccess.addHandler(function(response) {
      submitOmnitureEvent('event3', response.provider, 'onProviderLoginSuccess');
      });
  janrain.events.onProviderLoginComplete.addHandler(function(response) {
      submitOmnitureEvent('event4', response.provider, 'onProviderLoginComplete');
      });
  janrain.events.onProviderLoginToken.addHandler(function(response) {
      submitOmnitureEvent('event5', response.provider, 'onProviderLoginToken');
      });
  janrain.events.onReturnExperienceFound.addHandler(function(response) {
      submitOmnitureEvent('event6', response.returnProvider, 'onReturnExperienceFound');
      });
}
</script>
</head>
<body>
  <div id="janrainEngageEmbed"></div>
</body>
</html>