Here is a sample script for integrating your API data source(s) with Reactful's Persona - Custom Variables.

<!-- BEGIN Reactful Integration plugin for Custom Variables -->
<script>
    (function() {
        function verifySessionStorage() {
            try {
                var t = "__ss_test__";
                window.sessionStorage.setItem(t, t);
                window.sessionStorage.removeItem(t);
                return true;
            } catch (e) {
                return false;
            }
        }

        var custom_vars_data = null;
        var isSessionStorageAvailable = verifySessionStorage();

        if (isSessionStorageAvailable) {
            custom_vars_data = window.sessionStorage.getItem("custom_vars_data");
        }

        if (isSessionStorageAvailable && custom_vars_data === null) {
            var url = "URL_FOR_API_TO_FETCH_DATA";
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.onload = function() {
                if (xhr.readyState == xhr.DONE) {
                    if (xhr.status === 200) {
                        var jsonResponse = JSON.parse(xhr.responseText);
                        window.sessionStorage.setItem("custom_vars_data", JSON.stringify(jsonResponse));
                    }
                    else if (xhr.status !== 200) {
                        console.log("Error", err);
                    }
                }
            };
            xhr.send();
        }
    })();
</script>
<!-- End Reactful Integration plugin for Custom Variables -->

Notes on integration:

  • The integration script should ideally be loaded BEFORE the Reactful plugin.

  • If loading via a tag manager, we recommend only loading the Reactful plugin script AFTER the the integration script has completed loading.

  • In Google Tag Manager, you can use the Tag Sequencing function to set this order.

Please contact us for assistance in implementing your data source with Reactful.

Did this answer your question?