Documentation / Product / Features / User Profiles

Reading Entity via JavaScript Tag

Once user fields have been surfaced they can be used to personalize a user's experience. For exampley a theoretical car buying site that has surfaced some basic info about a user's last vehicle search resulting in the following data being available in the broswer.

{
  "last_make": "audi",
  "last_model": "rx8",
  "last_color": "onyx",
  "segments": [
    "all",
    "potential_buyers",
    "high_momentum"
  ]
}

Populate a Form

  1. Create a JavaScript Function that Populates Form Fields.
function(data){
  if(data.last_make !== ""){
    $('input[name="make"]').val(data.last_make);
  }

  if(data.last_model !== ""){
    $('input[name="model"]').val(data.last_model);
  }

  if(data.last_color !== ""){
    $('input[name="color"]').val(data.last_color);
  }
}
  1. Initialize the Callback Handler.
<script type="text/javascript"></script>!function(l,a){a.liosetup=a.liosetup||{},a.liosetup.callback=a.liosetup.callback||[],a.liosetup.addEntityLoadedCallback=function(l,o){if("function"==typeof a.liosetup.callback){var i=[];i.push(a.liosetup.callback),a.liosetup.callback=i}a.lio&&a.lio.loaded?l(a.lio.data):o?a.liosetup.callback.unshift(l):a.liosetup.callback.push(l)}}(document,window);
  1. Create a Callback: This will execute an action via JavaScript once the visitor has been identified and the profile has been loaded (using the function outlined above).
<script type="text/javascript">
    window.liosetup.addEntityLoadedCallback(function(data){
      if(data.last_make !== ""){
        $('input[name="make"]').val(data.last_make);
      }

      if(data.last_model !== ""){
        $('input[name="model"]').val(data.last_model);
      }

      if(data.last_color !== ""){
        $('input[name="color"]').val(data.last_color);
      }
    });
</script>

Once the profile has loaded Lytics will call the JavaScript function populating the form on the site. Once all the above steps are completed the final code is as follows:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>form value demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script type="text/javascript">
    // Lytics JavaScript Tag
    window.jstag=function(){function t(t){return function(){return t.apply(this,arguments),this}}function n(){var n=["ready"].concat(c.call(arguments));return t(function(){n.push(c.call(arguments)),this._q.push(n)})}var i={_q:[],_c:{},ts:(new Date).getTime(),ver:"2.0.0"},c=Array.prototype.slice;return i.init=function(t){return i._c=t,t.synchronous||i.loadtagmgr(t),this},i.loadtagmgr=function(t){var n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src=t.url+"/api/tag/"+t.cid+"/lio.js";var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(n,i)},i.ready=n(),i.send=n("send"),i.mock=n("mock"),i.identify=n("identify"),i.pageView=n("pageView"),i.bind=t(function(t){i._q.push([t,c.call(arguments,1)])}),i.block=t(function(){i._c.blockload=!0}),i.unblock=t(function(){i._c.blockload=!1}),i}(),window.jstag.init({cid:"{yourcid}", url:"//c.lytics.io", min:true, loadid:false});
  </script>
  <script type="text/javascript">
    // Lytics Callback Handler
    !function(l,a){a.liosetup=a.liosetup||{},a.liosetup.callback=a.liosetup.callback||[],a.liosetup.addEntityLoadedCallback=function(l,o){if("function"==typeof a.liosetup.callback){var i=[];i.push(a.liosetup.callback),a.liosetup.callback=i}a.lio&&a.lio.loaded?l(a.lio.data):o?a.liosetup.callback.unshift(l):a.liosetup.callback.push(l)}}(document,window);

    // Custom Callback Function
    // This particular callback simply checks that the three values are not empty strings and then uses jQuery to update the form.
    window.liosetup.addEntityLoadedCallback(function(data){
      if(data.last_make !== ""){
        $('input[name="make"]').val(data.last_make);
      }

      if(data.last_model !== ""){
        $('input[name="model"]').val(data.last_model);
      }

      if(data.last_color !== ""){
        $('input[name="color"]').val(data.last_color);
      }
    });
    </script>
</head>
<body> 
  <h2>A Sample Form</h2>
  <form action='' method='post'>
    <label>Make: </label><input type='text' name='make' value='' /><br/>
    <label>Model: </label><input type='text' name='model' value='' /><br/>
    <label>Color: </label><input type='text' name='color' value='' />
  </form>
</body>
</html>

This is one basic example of leveraging the current visitor's profile information. The personalization powered by Lytics builds from here. Using a similar pattern you could surface new listings on the site's index page that match a user's last search or present other vehicles that user may be interested in.