$(document).ready() for Sitecore FXM

CONTEXT

Federated Experience Manager (FXM) is a marketing tool from Sitecore, that allows you to use components defined in your WCM on other site and application. This is very useful if you ned to update multiple legacy applications or try some part of a new design on an existing site.

As most of other similar tools, Sitecore provides you with a JavaScript beacon that has to be included in a target site. It would call Sitecore and do all magic on the page related to an inclusion of HTML snippets into a page. Sounds easy, but what if you have really rich UI components or using front-end frameworks like jQuery or Angular. In this case, you need to make sure that you reinitialize embedded javascript correctly after FXM delivered all HTML to your page.

There should be something similar to $(document).ready()

APPROACH

In order to find that we need to do a bit of reverse engineering of FXM client code: only, it all should be automatically compiled and processed, moved to your web root.

  • Find an originator of AJAX call to FXM
  • Locate a response handler
  • Check, which extension points exists in it
  • Inject our code after FMX content is included into a page.

Calls to FXM service

All code related to FXM initiation sits in “bundle/beacon”, which is MVC bundle serving content from a minified BeaconApi.js file (located in website\sitecore\shell\client\Services\Assets\lib). Also, in the end of this bundle, you would see a declaration of a global “SCBeacon” object.

SCBeacon = new SCBeacon("http://qa.applications.marykayintouch.com/pages/sitecore/api/ssc/Beacon/Service");

During the initialization of this object internal service call a service track page visit:

internalService.trackPageVisit().then(visitSuccess).fail(dispatchError);

This method uses promises to handle a response.

Response handling

As you see there are two handlers that work with a service call. The second one is self-explanatory, while the first is a bit more interesting. This function checks all received HTML elements from Sitecore and renders them to a page DOM according to replacement options configured in FXM (before, after, content, event, fragment).

When the injection is done visitSuccess method, this method sends ready method through an event dispatcher:

events.dispatch('ready');
status = 'ready';

FXM events dispatcher

As you see above FXM beacon script has a built-in dispatcher, it is quite simple. It will iterate over subscribers and notify them when a new event was fired or as soon as you subscribed if a current status is equal to the event.

In order to subscribe custom handler to the dispatcher, you would need to use push function of SCBeacon object.

var push = function(data) {
  events.attach(data[0], data[1]);
  if (status === data[0]) {
    // immediately call back if matching status
    data[1]();
  }
}

FXM variant of $(document).ready()

So now we have all pieces that are required to initialize our frameworks for FXM. jQuery or Angular variant of ready method would be following:

if(SCBeacon && SCBeacon.push){ // check if SCBeacon exists
  SCBeacon.push([
    "ready",
    fxmReady // init function
  ]);
  SCBeacon.push([
    "error",
    function(){
      console.error("FXM failed to load")
    }
  ]);
}
else{
  console.error("FXM failed to load. No SCBeacon found")
}

As usual: Share if you like the post. Follow me on twitter @true_shoorik

$(document).ready() for Sitecore FXM

One thought on “$(document).ready() for Sitecore FXM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s