RichRelevance

Skip to end of metadata
Go to start of metadata

RichRelevance Integration Instructions

RichRelevance enables shoppers to find what they need quickly and easily as they shop online or in-store. 

Gigya allows you to leverage your clients' social information into better personalization and offer  the best content and promotions.  The integration is based on client implementation and extending Gigya's RaaS capabilities.

 

Registration-as-a-Service  is a premium package that requires separate activation. If it is not part of your site package please contact your Gigya Account Manager or contact us by filling in a  support form  on our site. You can also access the support page by clicking "Support" on the upper menu of Gigya's site.

Prerequisites

In order to use RichRelevance you must download the jQuery  JavaScript library.

Implementation Steps

The implementation uses RaaS.

Step 1 - Add an onLogin event with the accounts.addEventHandlers call:

gigya.accounts.addEventHandlers({
onLogin: onLoginHandler
});

Step 2 - Add an onLogin event handler :

function onLoginHandler(eventObj) {
function getAccountInfoResponse(response){
              if ( response.errorCode == 0 ) {           
                   var profile = response['profile'];
                   var data = response['data'];
                   jQuery.data(document.body,'profile', profile); //Store the profile object
                   jQuery.data(document.body,'data', data); //Store the data object
               } else {
                   alert('Error :' + response.errorMessage);
               }   
           }
gigya.accounts.getAccountInfo({ callback: getAccountInfoResponse });
}

Step 3 - Call the profile/data object from storage:

var profile = jQuery.data(document.body,'profile'); // call the profile object from storage
var data = jQuery.data(document.body,'data'); // call the data object from storage

Step 4 - Use the profile/data object in RichRelevance’s script :

R3_COMMON.addContext({"userAttribute":{"EyeColor":"data.EyeColor","HairColor":"data.HairColor"}});

 Code Example

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
        <SCRIPT type="text/javascript" lang="javascript" 
            src="http://cdn.gigya.com/JS/gigya.js?apikey=INSERT-YOUR-APIKEY-HERE">
        </SCRIPT>
        <script>
        // This method is activated when the page is loaded
        function onLoad() {
            // register for login event
            gigya.accounts.addEventHandlers({
                onLogin: onLoginHandler,
                onLogout: onLogoutHandler
            });
        }
    
        // onLogin Event handler
       function onLoginHandler(eventObj) {
            function getAccountInfoResponse(response) {
                if ( response.errorCode ==0) {
                    var profile = response['profile'];
                    var data = response['data'];
                    jQuery.data(document.body,'profile', profile); //Store the profile object
                    jQuery.data(document.body,'data', data); //Store the data object 
                } else {
                    alert('Error :'+ response.errorMessage);
                }
            }

            gigya.accounts.getAccountInfo({ callback: getAccountInfoResponse });
                document.getElementById('status').style.color ="green";
                document.getElementById('status').innerHTML ="Status: You are now signed in";
        }

        // onLogout Event handler
        function onLogoutHandler(eventObj) {
                document.getElementById('status').style.color ="red";
                document.getElementById('status').innerHTML ="Status: You are now signed out";
        }

       // Logout from Gigya platform. This method is activated when "Logout" button is clicked
        function logoutFromGS() {
            gigya.socialize.logout();
            jQuery.removeData(document.body,'profile'); //remove the the profile object from storage
            jQuery.removeData(document.body,'data'); //remove the the data object from storage
            document.getElementById('profile').innerHTML ='';
            document.getElementById('data').innerHTML ='';
            // logout from Gigya platform
        }

        function showdataprofile() {
            var profile = jQuery.data(document.body,'profile'); //call the the profile object from storage
            console.log(profile);
            var data = jQuery.data(document.body,'data'); // call the the data object from storage
            console.log(data);
            if (null != profile) {
                document.getElementById('profile').innerHTML ="Hello "+ profile.firstName +" "+ profile.lastName +" age: "+ profile.age;
            };
            if (null != data) {
                document.getElementById('data').innerHTML = data.test;
            };
            //console.log(jQuery.data(document.body,'profile'));
            //console.log(jQuery.data(document.body,'data'));
        }
    </script>

    <!-- richrelevance scripts -->
    <script src="http://media.richrelevance.com/rrserver/js/1.0/p13n.js"></script>
    <script charset="utf-8"type="text/javascript">
            var profile = jQuery.data(document.body,'profile'); // call the profile object from storage
            var data = jQuery.data(document.body,'data'); // call the data object from storage
        try{
            var R3_COMMON =new r3_common();
            R3_COMMON.setApiKey('3931974ed42b29b9');
            R3_COMMON.setBaseUrl(window.location.protocol + '//recs.richrelevance.com/rrserver/');
            R3_COMMON.setClickthruServer(window.location.protocol+"//"+window.location.host);
            R3_COMMON.setSessionId('fisfafzzjgrazz455dzulp55');
            R3_COMMON.setUserId('60efb186-ebb6-4cac-8d54-64ada57d37aa');
            R3_COMMON.addContext({"userAttribute":{"EyeColor":"data.EyeColor","HairColor":"data.HairColor"}});
            var R3_HOME =new r3_home(); //add the data.EyeColor to userAttribute EyeColor
            r3();
            } catch(e) {}
    </script>

</head>
<body onload="onLoad()">
        <br/>
        <h4>Please sign in using one of the following providers:</h4><br/><br/>
        <div id="loginDiv"></div>
        <script type="text/javascript">
            gigya.socialize.showLoginUI({
                height:85
                ,width:360
                ,showTermsLink:false // remove 'Terms' link
                ,buttonsStyle:'fullLogo' // Change the default buttons design to "Full Logos" design
                ,showWhatsThis:true // Pop-up a hint describing the Login Plugin, when the user rolls over the Gigya link.
                ,containerID:'loginDiv' // The component will embed itself inside the loginDiv Div 
                ,cid:''
            });
        </script>
    <br/>
    <br/><br/><br/>
        <h4>Click the button below to sign out from Gigya platform:</h4><br/><br/>
    <input id="btnLogout" type="button" value="Sign Out" 
        onclick="logoutFromGS()"/>
    <br/>
    <div id="status"></div>
    <br/>
    <br/>
    <input id="btnshowdataprofile" type="button" value="show profile"
        onclick="showdataprofile()"/>
    <br/>
    <div id="profile"></div>
    <div id="data"></div>
</body>
</html>