{"_id":"57605034c71b990e0045d832","__v":9,"project":"5668fab608f90021008e882f","parentDoc":null,"user":"5668fa9755e4b32100935d41","version":{"_id":"5668fab608f90021008e8832","__v":19,"project":"5668fab608f90021008e882f","createdAt":"2015-12-10T04:08:22.769Z","releaseDate":"2015-12-10T04:08:22.769Z","categories":["5668fab708f90021008e8833","569740f124490c3700170a64","569742b58560a60d00e2c25d","569742bd0b09a41900b2446c","569742cd69393517000c82b3","569742f459a6692d003fad8f","569743020b09a41900b2446d","5697430b69393517000c82b5","56a17776470ae00d00c30642","56a2c48a831e2a0d0069b1ad","56b535757bccae0d00e9a1cd","56e1ff6aa49fdc0e005746b5","57e1c88115bf6522002a5e4e","57fa65275ba65a17008b988f","57fbeea34002550e004c032e","58474584889b6c2d00fb86e9","58475dcc64157f0f002f1907","587e7b5158666c2700965d4e","58a349fc30852819007ba083"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.18.0","version":"1.18"},"category":{"_id":"569742bd0b09a41900b2446c","__v":9,"pages":["5697455824490c3700170a69","569747128400d52d00dd56a4","5697476b8560a60d00e2c262","569747a4c8ded91700307b92","5697489c59a6692d003fad96","56a1500244f3d80d00a2c388","56a2c51906150b0d002ad264","56b548b75f1cf00d00cc4773","56b54ae37719bb1900143093"],"project":"5668fab608f90021008e882f","version":"5668fab608f90021008e8832","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-01-14T06:39:57.496Z","from_sync":false,"order":6,"slug":"tuning-liftigniter-javascript","title":"Rendering,Tracking and A/B Testing Widgets (JavaScript)"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-06-14T18:43:00.038Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Only for special integrations\",\n  \"body\": \"If you are using anchor links for your recommended items (as most websites integrating LiftIgniter do) you can skip this section.\"\n}\n[/block]\n\n`$p(\"track\")` searches through anchors on a specified element, and adds tracking tag & event listeners on the recommended items. \n\nIf 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.\n\nFor example,\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$p(\\\"register\\\", {\\n  max: 5\\n  callback: function(resp) {\\n    // Process tags on URLs for tag tracking.\\n    resp.items = resp.items.map(function(item){\\n      // Adding a tag.\\n      // Make sure that the query parameter is handled correctly.\\n      // This example is simple so it doesn't cover all cases\\n      item.url = item.url + \\\"?li_source=LI&li_medium=widget_name\\\"\\n    })\\n\\n    // Rendering widget\\n    var element = document.querySelector(\\\".recommendation-selector\\\") \\n    var template = \\\"some template\\\"\\n    element.innerHTML = $p(\\\"render\\\", resp.items)\\n\\n    // Extract visible items on the widget\\n    var visible_items = resp.items.map(function(item){return item.url;})\\n\\n    // Send widget_shown event\\n    $p(\\\"send\\\", \\\"widget_shown\\\", {\\n      // Array of URL of items returned by recommendation\\n      vi: JSON.stringify(visible_items),\\n      w: \\\"widget_name\\\",\\n      // LI if the recommendation is from LiftIgniter \\n      source: \\\"LI\\\"\\n    })\\n    \\n    // Recommendations correspond to each individual item area within widget\\n    var recommendations = querySelectorAll(\\\".recommendation-selector > div\\\")\\n\\n    recommendations.foreach(\\n      function(element){\\n        // Attach an onClick event on each of the element DOM.\\n        element.onClick(function(){ \\n          $p(\\\"sendRobust\\\", \\\"widget_click\\\", { // using \\\"sendRobust\\\" to make sure click gets sent despite page redirection\\n            vi: JSON.stringify(visible_items), // list of visible items on widget\\n            w: \\\"widget_name\\\", // name of widget for performance tracking\\n            clickUrl: \\\"\\\", // url of the item being rendered on recommendation.\\n            source: \\\"LI\\\" // LI if the recommendation is from LiftIgniter \\n          })\\n        }\\n    ))\\n        \\n    // OPTIONAL for determining VCTR\\n    // Implement .onVisible function that executes given callback function\\n    // when the DOM is visible within user's screen.\\n    element.onVisible(function(){\\n    \\t$p(\\\"send\\\", \\\"widget_visible\\\", {\\n    \\t\\tvi: visible_items, // list of visible items on widget.\\n        w: \\\"widget_name\\\", // name of widget for performance tracking\\n      \\tsource: \\\"LI\\\" // LI if the recommendation is from LiftIgniter \\n    \\t})\\n    })\\n  }\\n})\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Click event handling: sendRobust\",\n  \"body\": \"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](doc:psendrobust).\"\n}\n[/block]","excerpt":"","slug":"tracking-with-no-anchor","type":"basic","title":"Tracking with no Anchor"}

Introduction

REST API (For App/Backend)

JavaScript SDK

Analytics API

Javascript SDK Integration Guide

Inventory (JavaScript)

Rendering,Tracking and A/B Testing Widgets (JavaScript)

Model query (Javascript)

JS SDK + API Integration

Web Debugging

FAQ / Troubleshooting

Metrics

LiftIgniter Lab

Drilldowns

Other Products

Tracking with no Anchor

[block:callout] { "type": "info", "title": "Only for special integrations", "body": "If you are using anchor links for your recommended items (as most websites integrating LiftIgniter do) you can skip this section." } [/block] `$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, [block:code] { "codes": [ { "code": "$p(\"register\", {\n max: 5\n callback: function(resp) {\n // Process tags on URLs for tag tracking.\n resp.items = resp.items.map(function(item){\n // Adding a tag.\n // Make sure that the query parameter is handled correctly.\n // This example is simple so it doesn't cover all cases\n item.url = item.url + \"?li_source=LI&li_medium=widget_name\"\n })\n\n // Rendering widget\n var element = document.querySelector(\".recommendation-selector\") \n var template = \"some template\"\n element.innerHTML = $p(\"render\", resp.items)\n\n // Extract visible items on the widget\n var visible_items = resp.items.map(function(item){return item.url;})\n\n // Send widget_shown event\n $p(\"send\", \"widget_shown\", {\n // Array of URL of items returned by recommendation\n vi: JSON.stringify(visible_items),\n w: \"widget_name\",\n // LI if the recommendation is from LiftIgniter \n source: \"LI\"\n })\n \n // Recommendations correspond to each individual item area within widget\n var recommendations = querySelectorAll(\".recommendation-selector > div\")\n\n recommendations.foreach(\n function(element){\n // Attach an onClick event on each of the element DOM.\n element.onClick(function(){ \n $p(\"sendRobust\", \"widget_click\", { // using \"sendRobust\" to make sure click gets sent despite page redirection\n vi: JSON.stringify(visible_items), // list of visible items on widget\n w: \"widget_name\", // name of widget for performance tracking\n clickUrl: \"\", // url of the item being rendered on recommendation.\n source: \"LI\" // LI if the recommendation is from LiftIgniter \n })\n }\n ))\n \n // OPTIONAL for determining VCTR\n // Implement .onVisible function that executes given callback function\n // when the DOM is visible within user's screen.\n element.onVisible(function(){\n \t$p(\"send\", \"widget_visible\", {\n \t\tvi: visible_items, // list of visible items on widget.\n w: \"widget_name\", // name of widget for performance tracking\n \tsource: \"LI\" // LI if the recommendation is from LiftIgniter \n \t})\n })\n }\n})", "language": "javascript" } ] } [/block] [block:callout] { "type": "info", "title": "Click event handling: sendRobust", "body": "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](doc:psendrobust)." } [/block]