In first part, we have seen, how can we enable sitecore federated experience manager and make it ready for collecting analytics and interaction data from non-sitecore sites. In the second part of this article, we will cover how we can configure non-sitecore sites into federated experience manager.

Part 1 – Configuring federated experience manager in Sitecore
Part 2 – Setting up non-sitecore site and add it into FXM
Part 3 – Displaying sitecore content into non-sitecore external site.
Part 4 – Personalize Content and Trigger Goal/Event from external site.

Creating a Non-Sitecore Site

However, this step can be skipped, if you already have any external website which is not implemented in sitecore. It can be developed with any language like php, java, or even pure html. Sitecore FXM will not restrict you to choose a specific type of site.
But you don’t have that external site and just wanted to try and explore FXM functionally, follow this section, as we are going to use plain, very simple and pure html page based static site for this article to explain FXM functionalities.
For this demo, we would download one pure html template from internet. There are lots and lots of websites out there from where you can get free html templates. I am going to download one nice sample template from below URL.
https://webat.net/register-form-html-css-responsive-design-templates/
If don’t have the domain name or hostname for this static website and we also don’t have static IP associated with it, we can test it with our local IIS instance and host this website there. We would name it “oxygen”. Verify your settings as per below screen shot.

Next, we would make a host entry in our hosts config file. Open that file from C:\Windows\System32\drivers\etc location and make an entry as follows.

Finally this static pure html site is ready to be browsed. It should looks like.

Now this site can be used for applying all features provided by federated experience manager from sitecore. i.e.
• Tracking Page Views from Non-Sitecore Sites
• Profiling Non-Sitecore Sites
• Personalizing Non-Sitecore Sites
• Testing Non-Sitecore Sites

Adding an external site in FXM

When you click on “Federated Experience Manager” application icon from sitecore client dashboard, you will be presented with below screen. Click on “Add external website” button from top left of the screen.

Once you click on that button, you will get a page where you need to fill general website information for which are trying to collect interaction data or where you want to inject sitecore content into a non sitecore site.

Put a name for this website and provide the actual website domain. The name is just a token and can be anything that make sense and is descriptive. The URL needs to be the root path to your site.

Beacon Script Tag
The most important part of this configuration, is beacon script. Beacon places a first party cookie on the visitor’s browser which sends data for that visitor back to server. This includes pages visited, links clicked, time on site, number of visits, geolocation, and referral source, as well as other custom data you want collected.
The beacon is created by taking a series of scripts and ‘bundeling’ them together (minifying and caching them).
Have a look in App_Config\Include\FXM\Sitecore.FXM.Bundle.config, this shows all the parts that go into the ‘bundeling’ process.
This is the place you can add or modify any extra scripts you need to be delivered to the client as part of the beacon.
The script tag, in below figure, has to be there in every page or master page that is shared among all pages, for which you want to use sitecore content and want to track interactions.

Simply paste this script tag in directly before the tag, wherever that might be in your remote site’s solution.

And click on “Save” button. You’ll notice that Save button is updated and now shows Publish. Before you publish, however, there are a couple more steps to take. First, you need to paste the script tag into the head of your remote site (found in the Generated Script text box). Second, you need to enable cross-site scripting for your remote site.

If everything went well, you will get a confirmation message from FXM that “JavaScript beacon found on external website.” it means that, both sites (sitecore and non sitecore) can talk to each other and FXM is ready to collect interactions from non-sitecore sites.

Points taken into consideration

• For testing purpose, if you are using your local machine for this exercise, and both sitecore site and non-sitecore site are hosted on same IIS server, make sure both sites are being accessed with separate hostname and not with same domain with different port number. This configuration won’t work with hostname or domain with port numbers.
• Both sites (sitecore and non sitecore) must talk to each other or in other words, both sites should be accessible to each other so that they can exchange data. Make sure, firewall is not limiting this accessibility.
• Make sure that you have access to the every page of the target (non-sitecore) to put script tag in header section. At least one time to configure it.
• If you are managing multiple external sites in your federated experience manager, you may need to set FXM rule to capture the incoming data from specific domain.

Note: If you are in scaling environment, where there are multiple Content Delivery servers and you are having separate Content Management server, you might need to change setting in FXM host name to get a correct hostname in generated beacon script.
On each content management server, you must specify which content delivery server that the content management server should use. In the Sitecore.FXM.config file, in the FXMHostname setting, specify the content delivery server:

This parameter is empty by default.

Federated Experience Limitation

The FXM module embeds standardized code to external websites to activate the functionality. However, this approach is incompatible with certain website functionalities.
FXM does not support external websites that use:
• RequireJS
• Cookie-based authentication to website pages.
• Dynamic HTML generated by Document Object Model (DOM) or modified by JavaScript.
• Parts of the HTML page that are loaded using AJAX technologies.
• Navigational links that are generated by JavaScript.
• Client-side JavaScript code for navigation.
• 302 HTTP redirects for navigation.
• Custom ports. You must use the standard HTTP (80) and HTTPS (443) ports.
• The tag.

In the Experience Editor, placeholder content and personalization does not work if the external website uses:
• Dynamic HTML generated by DOM or modified by JavaScript.
• Loading parts of the HTML page using AJAX technologies.

References

https://doc.sitecore.net/sitecore_experience_platform/digital_marketing/federated_experience_manager/configuring/the_requirements_and_limitations_of_fxm?roles=admin
https://doc.sitecore.net/sitecore_experience_platform/digital_marketing/federated_experience_manager/using_fxm/add_an_external_website_in_fxm

http://www.techguilds.com/blog/2017/03/how-to-track-clicks-with-sitecore-fxm