Tracking with no Anchor

📘

Only for special integrations

If you are using anchor links for your recommended items (as most websites integrating LiftIgniter do) you can skip this section.

$p("track") searches through anchors on a specified element, and adds tracking tag & event listeners on the recommended items.

If you aren't using an anchor to link your recommendations, then you'll have to trigger the custom widget_shown, widget_visible, and widget_click events yourself by using $p("send"). This is all handled by $p("track") if you are using an anchor tag on your widget, but this doesn't handle other cases since options are too broad.

For example,

JavaScript

$p("register", {
  max: 5
  callback: function(resp) {
    // Process tags on URLs for tag tracking.
    resp.items = resp.items.map(function(item){
      // Adding a tag.
      // Make sure that the query parameter is handled correctly.
      // This example is simple so it doesn't cover all cases
      item.url = item.url + "?li_source=LI&li_medium=widget_name"
    })

    // Rendering widget
    var element = document.querySelector(".recommendation-selector") 
    var template = "some template"
    element.innerHTML = $p("render", resp.items)

    // Extract visible items on the widget
    var visible_items = resp.items.map(function(item){return item.url;})

    // Send widget_shown event
    $p("send", "widget_shown", {
      // Array of URL of items returned by recommendation
      vi: JSON.stringify(visible_items),
      w: "widget_name",
      // LI if the recommendation is from LiftIgniter 
      source: "LI"
    })
    
    // Recommendations correspond to each individual item area within widget
    var recommendations = querySelectorAll(".recommendation-selector > div")

    recommendations.foreach(
      function(element){
        // Attach an onClick event on each of the element DOM.
        element.onClick(function(){ 
          $p("sendRobust", "widget_click", { // using "sendRobust" to make sure click gets sent despite page redirection
            vi: JSON.stringify(visible_items), // list of visible items on widget
            w: "widget_name", // name of widget for performance tracking
            clickUrl: "", // url of the item being rendered on recommendation.
            source: "LI" // LI if the recommendation is from LiftIgniter 
          })
        }
    ))
        
    // OPTIONAL for determining VCTR
    // Implement .onVisible function that executes given callback function
    // when the DOM is visible within user's screen.
    element.onVisible(function(){
    	$p("send", "widget_visible", {
    		vi: visible_items, // list of visible items on widget.
        w: "widget_name", // name of widget for performance tracking
      	source: "LI" // LI if the recommendation is from LiftIgniter 
    	})
    })
  }
})

📘

Click event handling: sendRobust

If you are trying to listen for a click event on a link, then you might want to make sure that the event is sent before redirection occurs. You can reference how we handle this in our $p("sendRobust") documentation.