{"_id":"569747128400d52d00dd56a4","project":"5668fab608f90021008e882f","user":"56839cf74aecbd0d00a4659e","__v":1,"githubsync":"","parentDoc":null,"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-01-14T06:58:26.990Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"This is a supplementary documentation to our [Full Integration with A/B Testing](doc:ab-testing) documentation, that explains in more detail how to render recommendations correctly.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"See our Full A/B testing integration instructions\",\n  \"body\": \"We recommend reading our [Full integration with A/B testing instructions](https://liftigniter.readme.io/docs/ab-testing) for a big-picture view of the entire integration.\"\n}\n[/block]\nFor technical documentation on the precise specifications of the functions, see:\n\n* [$p(\"register\")](doc:pregister) documentation. \n* [$p(\"render\")](doc:prender) documentation.\n\nWe also have the tracking code lines in the code snippets, but tracking as a topic is discussed more in the [Tracking Widgets](doc:tracking-widgets) section.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2. Rendering Widgets using Mustache template\"\n}\n[/block]\n**Step 1.** Add recommendation unit placeholder for your widget.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"li-recommendation-unit\\\"></div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n**Step 2.** Add a mustache template for rendering the recommendations to your page.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"application/mustache\\\"\\n        id=\\\"li-recommendation-template\\\">\\n  {{#items}}\\n  <div class='recommended_item'>\\n    <a href=\\\"{{url}}\\\">\\n      <img src=\\\"{{thumbnail}}\\\" width=\\\"150\\\" height=\\\"150\\\" />\\n      <span class=\\\"title\\\">{{title}}</span>\\n    </a>\\n  </div>\\n {{/items}}\\n</script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n**Step 3.** Render recommendations.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Callback renders and injects results into the placeholder.\\n$p('register', {\\n\\t\\tmax: 5, // Number of items you want to show\\n  \\twidget: 'default-widget',\\n\\t\\tcallback: function(resp) {\\n\\t\\t\\t// Query selector should match div name from Step 1\\n\\t\\t\\tvar el = document.querySelector('#li-recommendation-unit');\\n\\t\\t\\t// Template should match mustache template name from Step 2\\n\\t\\t\\tvar template = document.querySelector('#li-recommendation-template').innerHTML;\\n\\t\\t\\t// Basically Mustache.render(template, resp);\\n\\t\\t\\tel.innerHTML = $p('render', template, resp);\\n                    \\n\\t\\t\\tconsole.log(\\\"Debug was set to true; disable it in production!\\\"); // Remove in production\\n\\t\\t\\t\\n      $p('track', {\\n         // Div name from Step 1 and recommendation item div name from Step 2\\n\\t\\t\\t   elements: document.querySelectorAll('#li-recommendation-unit > div.recommended_item'),\\n         name: 'default-widget',\\n\\t\\t\\t   // Match widget name\\n         source: 'LI',\\n\\t\\t\\t   // Source \\\"LI\\\" indicates recommendations are provided by LiftIgniter\\n\\t\\t\\t   _debug : true\\n\\t\\t\\t   // Optional: show alerts in console on click or visible events. Disable in production!\\n\\t\\t\\t});\\n\\t\\t}\\n   });\\n\\n// Executes the registered call.\\n$p('fetch');\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nNote that you need to keep the template name and query selector consistent with your mustache template and div.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3. Testing that the recommendations are rendering correctly\"\n}\n[/block]\nWhen you execute your code to register and fetch, you should see LiftIgniter's recommendations correctly render in the place that you intended for them to show up. You should verify that the recommendations are rendering correctly. In order to verify that the items being rendered are the ones being recommended by LiftIgniter, and that they are being rendered in the correct order, you can add the following line to log the response in the console, and then compare the recommendations.\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\t\\t\\tconsole.log(resp);// This should be the first line in the callback function\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIf you notice problems with the number of items returned, see the debugging guidance at [Quick-Testing LiftIgniter](doc:2-quick-testing-liftigniter). If you notice problems with the fields we are returning (for instance, we are returning the wrong images), see the debugging guidance in Section 1 of [Editing Fields/Hiding Item](doc:checking-data-fields).\n\nIf you are engaging in client-side filtering of the recommendations, then you should make sure that you preserve the order in which we returned the items.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Remember to add tracking\",\n  \"body\": \"Proceed to the [next section](https://liftigniter.readme.io/docs/tracking-widgets) to make sure the tracking is implemented correctly before you push your code to production.\"\n}\n[/block]","excerpt":"","slug":"rendering-widgets","type":"basic","title":"Rendering Widgets"}
This is a supplementary documentation to our [Full Integration with A/B Testing](doc:ab-testing) documentation, that explains in more detail how to render recommendations correctly. [block:callout] { "type": "warning", "title": "See our Full A/B testing integration instructions", "body": "We recommend reading our [Full integration with A/B testing instructions](https://liftigniter.readme.io/docs/ab-testing) for a big-picture view of the entire integration." } [/block] For technical documentation on the precise specifications of the functions, see: * [$p("register")](doc:pregister) documentation. * [$p("render")](doc:prender) documentation. We also have the tracking code lines in the code snippets, but tracking as a topic is discussed more in the [Tracking Widgets](doc:tracking-widgets) section. [block:api-header] { "type": "basic", "title": "2. Rendering Widgets using Mustache template" } [/block] **Step 1.** Add recommendation unit placeholder for your widget. [block:code] { "codes": [ { "code": "<div id=\"li-recommendation-unit\"></div>", "language": "html" } ] } [/block] **Step 2.** Add a mustache template for rendering the recommendations to your page. [block:code] { "codes": [ { "code": "<script type=\"application/mustache\"\n id=\"li-recommendation-template\">\n {{#items}}\n <div class='recommended_item'>\n <a href=\"{{url}}\">\n <img src=\"{{thumbnail}}\" width=\"150\" height=\"150\" />\n <span class=\"title\">{{title}}</span>\n </a>\n </div>\n {{/items}}\n</script>", "language": "html" } ] } [/block] **Step 3.** Render recommendations. [block:code] { "codes": [ { "code": "// Callback renders and injects results into the placeholder.\n$p('register', {\n\t\tmax: 5, // Number of items you want to show\n \twidget: 'default-widget',\n\t\tcallback: function(resp) {\n\t\t\t// Query selector should match div name from Step 1\n\t\t\tvar el = document.querySelector('#li-recommendation-unit');\n\t\t\t// Template should match mustache template name from Step 2\n\t\t\tvar template = document.querySelector('#li-recommendation-template').innerHTML;\n\t\t\t// Basically Mustache.render(template, resp);\n\t\t\tel.innerHTML = $p('render', template, resp);\n \n\t\t\tconsole.log(\"Debug was set to true; disable it in production!\"); // Remove in production\n\t\t\t\n $p('track', {\n // Div name from Step 1 and recommendation item div name from Step 2\n\t\t\t elements: document.querySelectorAll('#li-recommendation-unit > div.recommended_item'),\n name: 'default-widget',\n\t\t\t // Match widget name\n source: 'LI',\n\t\t\t // Source \"LI\" indicates recommendations are provided by LiftIgniter\n\t\t\t _debug : true\n\t\t\t // Optional: show alerts in console on click or visible events. Disable in production!\n\t\t\t});\n\t\t}\n });\n\n// Executes the registered call.\n$p('fetch');", "language": "javascript" } ] } [/block] Note that you need to keep the template name and query selector consistent with your mustache template and div. [block:api-header] { "type": "basic", "title": "3. Testing that the recommendations are rendering correctly" } [/block] When you execute your code to register and fetch, you should see LiftIgniter's recommendations correctly render in the place that you intended for them to show up. You should verify that the recommendations are rendering correctly. In order to verify that the items being rendered are the ones being recommended by LiftIgniter, and that they are being rendered in the correct order, you can add the following line to log the response in the console, and then compare the recommendations. [block:code] { "codes": [ { "code": "\t\t\tconsole.log(resp);// This should be the first line in the callback function", "language": "javascript" } ] } [/block] If you notice problems with the number of items returned, see the debugging guidance at [Quick-Testing LiftIgniter](doc:2-quick-testing-liftigniter). If you notice problems with the fields we are returning (for instance, we are returning the wrong images), see the debugging guidance in Section 1 of [Editing Fields/Hiding Item](doc:checking-data-fields). If you are engaging in client-side filtering of the recommendations, then you should make sure that you preserve the order in which we returned the items. [block:callout] { "type": "warning", "title": "Remember to add tracking", "body": "Proceed to the [next section](https://liftigniter.readme.io/docs/tracking-widgets) to make sure the tracking is implemented correctly before you push your code to production." } [/block]