We are starting the migration of a site to make use of Sitecore FXM (federated experience manager) and wanted to do a very quick test as to how it would play with our existing sites javascript. The key question was are there any glaringly obvious issues when we drop in the beacon?

There are a few options – a common one would be to add the beacon to a qa / uat site and test there. However, what if the content isn’t as up-to-date – is there another solution?

The approach below is a bit hacky so don’t rely on this for your final integration testing! However, on the plus side, it’s very quick to see things in action 🙂

1. Select the site you want to test on. Nominally: www.sitecore.net
2. Fire up a new instance of Sitecore on your dev machine (8.1 if possible) with the host: fxm.www.sitecore.net
3. Create a new FXM site entry and set the host to be fxm.www.sitecore.net
   1. Note, we will change this later
4. Through the FXM experience editor add a hello world placeholder and control to your page
   1. This should create you an item in the tree under: ‘/sitecore/system/Marketing Control Panel/FXM/www sitecore net’
5. Open up the new placeholder you added in the tree and note the selector. This can be anything you want – for the sitecore site update this to be say ‘#Form1 > div.shell’ (without the ‘s)
   1. To find the value to use, dive into chrome developer tools, right click the element you want and choose ‘copy XPath’ or ‘copy CSS path’ – I found css was easier to work with as you can target specific elements, not array entries
6. Update the primary domain entry added in step 3 to be www.sitecore.net
7. Publish the lot
8. Visit www.sitecore.net in a browser and note nothing has changed
9. In the chrome console run the following script:
   1. var script = document.createElement(‘script’); script.type = ‘text/javascript’; script.src = ‘//fxm.www.sitecore.net/bundle/beacon’; document.head.appendChild(script);
   2. If the script here fails, make sure the ‘ are proper single quotes, not funky curly ones.
10. You should see in the network tab a new request to the beacon – the response should be json containing all the data needed for rendering your changes to the page
11. Check the page – in theory anything set in step 4/5 should now be applied to the page

A word of caution – if you are interested in how the placeholders work you can always view: Presentation details -> Final renderings. However be careful, don’t ok (ie save) once you’ve reviewed them as the format saved back into the field isn’t compatible with FXM.