SiteSpect Implementation

README.md

SiteSpect

What did we test

• creation of Metrics (which is SiteSpect's name for Campaign/Variation "goals")
• creation of (Standard) Campaigns
• creation of Variations
• creation of Global Variations

All these points are relevant for the requirements of Team Sonic, which are:

• assigned Campaign- and Variation-IDs must be accessible via JS
• these IDs must be accessible by React as well
• we want to implement changes required by the Campaign/Variation within our UIs manually
• we need to be able to manually send metrics via SiteSpect's EventTracking to track our campaign goals

Keep in mind: WYSIWIG is no requirement for us at Team Sonic!

Steps

• Create Metrics to link to your Campaign
• Create a Campaign of type "Standard"
  • add a Variation with Trigger Page source Contains </head> and let it search for </head> and replace it with </head>
  • link relevant metrics either as KPIs or assigment
• Create a Global Variation and either limit it to your subdomain or link it to your Campaign
  • use </body> as Trigger
  • make it search for </body>and replace it with the contents replacement.js (minify if needed) from this gist

Howto

If you followed the steps above you should be able to preview your campaign (or set it "active running" and test it live). The page source should contain contents of replacement.js from this gist. A global window.SSobject should be provided containing campaigns (an array of campaign-IDs currently assigned) and variations (an array of variation-IDs currently assigned) as well as a load method to lazily load SiteSpect's corejs required for manual Metric-Tracking.

Whenever you need to track Metrics make sure to load SiteSpect's core via SS.load which accepts a function as an onLoad callback that will get passed array for campaigns and variations as arguments when corejs was loaded.

Afterwards, simply call SS.EventTrack.rp('[NAME-OF-YOUR-METRIC]'); to have SiteSpect send a tracking request for this metric.

Findings

For our needs SiteSpect's proxy solution injects only a very small inline script which is really flexible as you may change it according to your needs. The script we implemented allows lazyloading of the only other SiteSpect-script we need, core. core itself only has approx. 2.5 KByte minified & gzipped which is absolutely tiny.

We did not check for flickering as this is caused by WYSIWIG in conjunction with ServerSide rendering + Rehydration which is Marta's case. Due to our very limited requirements we should never have any flickering anyway.

Overall SiteSpect seems to be really capable. It is not that easy for non devs and devs as well as it has quite steep learning curve. The documentation for developers is (after it did work again) quite good and helpful actually.

Links

Documentation

replacement.js

<script>
(function(window, document, id) {
  var SS = window.SS = window.SS || {};

  SS.campaigns = (SS.campaigns || []).concat('__SS_LISTCAMPAIGN{__SS_TCID__}{;}__'.split(';'));
  SS.variations = (SS.variations || []).concat('__SS_LISTCAMPAIGN{__SS_VGID__}{;}__'.split(';'));
  SS.load = function(fn) {
    var callback = (typeof fn === 'function') ? function() { fn(SS.campaigns, SS.variations); } : null,
        isLoaded = !!(SS.EventTrack || document.getElementById(id));
    
    if (!isLoaded) {
      script = document.createElement('script');
      script.src = '/__ssobj/core.js';
      script.id  = id;
      script.async = true;

      callback && script.addEventListener('load', callback, false);

      document.head.appendChild(script);

      return;
    }

    callback && callback();
  }
}(window, document, 'siteSpectCore'));
</script>
</body>