Implement FULL Story for User Session Recording

A full story is a great tool for recording user sessions on your website. It is a free tool you just need to register on the website and place some JavaScript code in pages and you are good to go.

To Register Click on following link   Register

After successfully registering you need to copy the following code in the head section of each page you want to record.

window['_fs_debug'] = false;
window['_fs_host'] = 'fullstory.com';
window['_fs_org'] = '5ED6T';
window['_fs_namespace'] = 'FS';
(function(m,n,e,t,l,o,g,y){
    if (e in m && m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].'); return;}
    g=m[e]=function(a,b){g.q?g.q.push([a,b]):g._api(a,b);};g.q=[];
    o=n.createElement(t);o.async=1;o.src='https://'+_fs_host+'/s/fs.js';
    y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
    g.identify=function(i,v){g(l,{uid:i});if(v)g(l,v)};g.setUserVars=function(v){g(l,v)};
    g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
    g.clearUserCookie=function(c,d,i){if(!c || document.cookie.match('fs_uid=[`;`]*`[`;`]*`[`;`]*`')){
    d=n.domain;while(1){n.cookie='fs_uid=;domain='+d+
    ';path=/;expires='+new Date(0).toUTCString();i=d.indexOf('.');if(i<0)break;d=d.slice(i+1)}}};
})(window,document,window['_fs_namespace'],'script','user');

Here _fs_org is Your User ID you can make it configurable to use it in a different environment.

Now put the following code in your page footer.

FS.identify('THE_ID_THAT_YOU_USE_IN_YOUR_APP_FOR_THIS_USER', {
  displayName: 'Daniel Falko',
  email: 'danielfalko@example.com',
  reviewsWritten_int: 14,
});

Here you have to change ID and user details to distinguish user on Full story app.

Next Step is to hide users sensitive data. Like credit card details or user’s password.

To stop these fields to be recorded user following css code
Enter CSS selectors on separate lines, describing elements to be excluded from capture.

input[type="password"]
[autocomplete="cc-name"]
[autocomplete="cc-given-name"]
[autocomplete="cc-additional-name"]
[autocomplete="cc-family-name"]
[autocomplete="cc-number"]
[autocomplete="cc-exp"]
[autocomplete="cc-exp-month"]
[autocomplete="cc-exp-year"]
[autocomplete="cc-csc"]
[autocomplete="cc-type"]

Fixed Header Element on Window Scroll

TO Fix any element like menu on top while scrolling page down use following code.

    $(function(){ // document ready
        if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
            var stickyTop = $('.sticky').offset().top; // returns number 
            $(window).scroll(function(){ // scroll event
                var windowTop = $(window).scrollTop(); // returns number 
                if (stickyTop < windowTop){
	            $('.sticky').css({ position: 'fixed', top: 0 });
                }else{
	            $('.sticky').css('position','static');
                }
            });
        }
    });