Fullstory & Adobe Target Integration

Combine Fullstory and Adobe Target optimization to gain a deeper understanding of your website variations and their impact on client journeys. With this knowledge, you can make more informed decisions and manage a better digital experience for your clients. Understanding the impact of your optimization with Fullstory analytics will unlock faster time-to-market and client satisfaction with all of your product efforts.

Instructions

Follow the below instructions to integrate Adobe Target with Fullstory:

1. Wherever you have deployed Adobe Target, whether via manual code deployment or by leveraging the Adobe Dynamic Tag Management (DTM) module, add the following Fullstory snippet (fully compiled):
   

   (function () {
     'use strict';
     function fs(api) {
       if (!hasFs()) {
         return function () {
           console.error('FullStory unavailable, check your snippet or tag');
         };
       } else {
         if (api && !window[window._fs_namespace][api]) {
           return function () {
             console.error(window._fs_namespace + '.' + api + ' unavailable, update your snippet or verify the API call');
           };
         }
         return api ? window[window._fs_namespace][api] : window[window._fs_namespace];
       }
     }
     function hasFs() {
       return window._fs_namespace && typeof window[window._fs_namespace] === 'function';
   
     }
     function isFsReady() {
       return hasFs() && typeof window[window._fs_namespace].getCurrentSessionURL === 'function';
   
     }
     var _fsReadyFunctions = [];
     function proxiedFsReady() {
       for (var x = 0; x < _fsReadyFunctions.length; x++) {
         try {
           _fsReadyFunctions[x]();
         } catch (error) {
           console.warn("Proxied _fs_ready function threw error", error);
         }
       }
     }
     function registerFsReady(callbackFn) {
       if (isFsReady()) {
         callbackFn();
         return;
       }
       if (window._fs_ready && !(window._fs_ready === proxiedFsReady)) {
         _fsReadyFunctions.push(window._fs_ready);
       }
       _fsReadyFunctions.push(callbackFn);
       Object.defineProperty(window, "_fs_ready", {
         get: function get() {
           return proxiedFsReady;
         },
         set: function set(someFunction) {
           _fsReadyFunctions.push(someFunction);
         },
         configurable: true
       });
     }
     if (window._FS_ADOBE_TARGET_INTEGRATION) {
       console.warn("FullStory Adobe Target Integration loaded twice");
     } else {
       window._FS_ADOBE_TARGET_INTEGRATION = "FS_ADOBE_TARGET_INTEGRATION";
       document.addEventListener('at-request-succeeded', function (event) {
         if (event && event.detail && event.detail.responseTokens && event.detail.responseTokens.length) {
   
           registerFsReady(function () {
             for (var i = 0; i < event.detail.responseTokens.length; i++) {
               fs("event")("Experiment Viewed", event.detail.responseTokens[i]);
             }
           });
         }
       });
     }
   }());

2. Save and deploy the new snippet. This will push the Adobe Target data from the digital property to the Fullstory platform.

The above script utilizes an addEventListener javascript call that listens for the Adobe Target event at-request-succeeded. This is called whenever Adobe Target has run on a page. Then, it looks for any experiments, or responseTokens, that are on the page and turns them into an FS.event call with all the details. The events then appear in the session replay event stream and are searchable as segments.

Placing a listener on every event is one way to ensure every target event is ingested. Additionally, doing so makes these events searchable in Segments and Metrics as well as applicable to our analytics reporting tools like Funnels, Journeys, and Heatmaps.

NOTE*
Below is the Fullstory snippet (before compilation):

import {fs, registerFsReady} from "./utils/fs";
if( window._FS_ADOBE_TARGET_INTEGRATION ){
    console.warn( "FullStory Adobe Target Integration loaded twice");
}
else {
    window._FS_ADOBE_TARGET_INTEGRATION = "FS_ADOBE_TARGET_INTEGRATION";
    document.addEventListener( 'at-request-succeeded',  (event) => {
        if( event && event.detail && event.detail.responseTokens && event.detail.responseTokens.length ){

            registerFsReady( () => {
                for( let i=0; i<event.detail.responseTokens.length; i++ ){
                    fs("event")("Experiment Viewed", event.detail.responseTokens[i]);
                }
            });
        }
    } );
}

This snippet has some guards to make sure it only registers once (in case you accidentally add it twice) and also our registerFsReady function which does some validations to make sure everything is ready to execute.