Installation

This setup will get our viewing features working in a development or test environment.

Add the script

In the head or body, add the script:

// Add your way of telling that we are in Production site and on a public domain name here:
var isProduction = true;
 
// To prevent page views from being saved in non-Production environments
// and with an example to not track "noindex" pages and
// exclude CMS editor views in Production
if (!isProduction)
{
    <script>
        document.cookie = 'rekblock=1; max-age=60; SameSite=None; Secure';
    </script>
}
else if ((Model.ExcludedFromExternalIndexing == false &&
          Model.IsAuthenticatedCmsEditor == false &&
          Model.IsPublished) == false)
{
    <script>
        window.rek_blocksaveview = true;
    </script>
}
 
var rekScript = $"https://static.rekai.se/{siteSettings.RekScriptId}.js";
<script src="@rekScript" defer></script>

At some point you probably want to check if script can render like this or if you should integrate with your consent service and check for Rek.ai consent.

List recommendations

If you have been tracking views in Production already, you could start by adding the simplest way of listing recommendations in Production: <div class="rek-prediction"></div>

If you set data-projectid and data-srek on the DIV element, recommendations from Production will show in your local development environment:

var attributes = new Dictionary<string, string>
{
    { "class", "rek-prediction" }
};
 
if (!isProduction
    && !string.IsNullOrWhiteSpace(siteSettings.RekProjectId)
    && !string.IsNullOrWhiteSpace(siteSettings.RekSecretKey))
{
    attributes.Add("data-projectid", siteSettings.RekProjectId);
    attributes.Add("data-srek", siteSettings.RekSecretKey);
}
 
<div @Html.Raw(string.Join(" ", attributes.Select(x => $"{x.Key}=\"{x.Value}\"")))></div>

Optimizely Shared content type setup