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 need to update multiple legacy applications or try some part of a new design on an existing site.

Like most of the 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 the 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

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 webroot.

  • Find an originator of AJAX call to FXM
  • Locate a response handler
  • Check, which extension points exist in it
  • Inject our code after FMX content is included on 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, at the end of this bundle, you would see a declaration of a global “SCBeacon” object.

1

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:

1

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

This method uses promises to handle the response.

Response handling

As you see two handlers 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:

1
2

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 the current status is equal to the event.

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

1
2
3
4
5
6
7

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