{"_id":"5877f3c0e1d2bd3d002a75ab","project":"5668fab608f90021008e882f","__v":0,"user":"5668fa9755e4b32100935d41","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)"},"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"},"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-01-12T21:23:12.236Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":9,"body":"Sometimes, you might want to show recommendations powered by LiftIgniter across multiple pages, or on a single page with an infinite scroll of recommendations, such as in a feed.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Use cases\"\n}\n[/block]\nThe following are some of the use cases we will cover here.\n\n* Infinite scroll of recommendations, typically seen for a feed: Here, new batches of recommendations load once the user has scrolled through the existing batch of recommendations. Note that this is different from an infinite scroll of full articles, which is described in the [Single Page Application](doc:push-state-based-single-page-application) documentation.\n* A paginated set of recommendations, where the user can jump to a specific page by clicking on the page number (single-page implementation, so that all the \"pages\" are part of the same DOM).\n* A paginated set of recommendations, where the user can jump to a specific page by clicking on the page number (each page corresponds to a separate HTML page).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Concerns\"\n}\n[/block]\nWhen powering a paginated set of results using a LiftIgniter query, we need to make sure of the following:\n\n* Proper tracking: Data sent to LiftIgniter correctly records what page of recommendations was shown, and only includes items visible on that page.\n* Consistency (applicable in some contexts): If the user has already visited a page and then revisits that page, the same set of results is shown.\n* Deduplication: The different pages should have non-overlapping sets of results.\n\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Proper tracking\"\n}\n[/block]\nYou need to [call our tracking function](doc:tracking-widgets) for each \"page\" of recommendations.\n\nWhen tracking LiftIgniter recommendations, there are two main changes you should make when dealing with paginated recommendations.\n\n* If your different recommendation pages are part of the same DOM (as would occur in the case of an infinite scroll of recommendations) you need to make sure that the selector you use to define your elements when tracking *only* matches the recommendations in that page.\n* In order for our system to correctly identify what numbered page it is, you should include opts: {page: \"page number\"} in your $p(\"track\",...) function.\n\nHere's what your tracking call will look like (with changes indicated):\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$p('track', {\\n    opts: {page: 2}, // or whatever your page number is. This helps us separately track the different pages despite them having the same widget name\\n    elements: document.querySelectorAll('selector that matches ONLY the recommendations on that page'), // Be careful about colliding selectors in the case that all the recommendation pages are in the same DOM, e.g., in an infinite scroll or feed of recommendations\\n    name: 'your widget name', // widget name can be the same across the different pages\\n    source: 'LI' // or 'base' if it's the base slice\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Consistency\"\n}\n[/block]\nIn some cases, you care about consistency for paginated recommendations: if a user returns to a page the user has already visited, then the user should see the same recommendations that he or she already saw.\n\nFor an infinite scroll or single-page app, where you are storing the already-visited recommendations in the DOM, consistency is automatic.\n\nIn other cases, you would need to store the recommendations rendered on already-visited pages in the client's local storage. If the end user revisits a page, then the recommendations get pulled from local storage, thereby guaranteeing consistency.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Deduplication\"\n}\n[/block]\nIn most cases, you'd want to make sure that the recommendations shown on different pages are different from each other.\n\nThere are two ways of doing the deduplication:\n\n* Implicit deduplication (handled by LiftIgniter): LiftIgniter automatically deduplicates recommendations across pages using a pageviewId field that is automatically packaged in by our JavaScipt SDK. However, this deduplication happens only between recommendations *returned by* LiftIgniter. **We must get a widget_shown** event in order to deduplicate. It may not work correctly if: \n** the user navigates between multiple URLs of the site and then returns to an earlier URL (as we keep server-side records for only one current page/URL). If you are doing an API integration, you must explicitly include a value for the pageviewId across all your widget requests so that we know each request is for the same current page and that the user has not moved off the current URL.\n** A widget_shown event is not received - our models will interpret this as though the items were not loaded on the page, and are therefore still valid recommendations\n* Explicit deduplication: You can send `excludeItems` in your query with a list of the items that have already been shown and that you wish to exclude.","excerpt":"","slug":"query-pagination","type":"basic","title":"Query pagination"}
Sometimes, you might want to show recommendations powered by LiftIgniter across multiple pages, or on a single page with an infinite scroll of recommendations, such as in a feed. [block:api-header] { "type": "basic", "title": "Use cases" } [/block] The following are some of the use cases we will cover here. * Infinite scroll of recommendations, typically seen for a feed: Here, new batches of recommendations load once the user has scrolled through the existing batch of recommendations. Note that this is different from an infinite scroll of full articles, which is described in the [Single Page Application](doc:push-state-based-single-page-application) documentation. * A paginated set of recommendations, where the user can jump to a specific page by clicking on the page number (single-page implementation, so that all the "pages" are part of the same DOM). * A paginated set of recommendations, where the user can jump to a specific page by clicking on the page number (each page corresponds to a separate HTML page). [block:api-header] { "type": "basic", "title": "Concerns" } [/block] When powering a paginated set of results using a LiftIgniter query, we need to make sure of the following: * Proper tracking: Data sent to LiftIgniter correctly records what page of recommendations was shown, and only includes items visible on that page. * Consistency (applicable in some contexts): If the user has already visited a page and then revisits that page, the same set of results is shown. * Deduplication: The different pages should have non-overlapping sets of results. [block:api-header] { "type": "basic", "title": "Proper tracking" } [/block] You need to [call our tracking function](doc:tracking-widgets) for each "page" of recommendations. When tracking LiftIgniter recommendations, there are two main changes you should make when dealing with paginated recommendations. * If your different recommendation pages are part of the same DOM (as would occur in the case of an infinite scroll of recommendations) you need to make sure that the selector you use to define your elements when tracking *only* matches the recommendations in that page. * In order for our system to correctly identify what numbered page it is, you should include opts: {page: "page number"} in your $p("track",...) function. Here's what your tracking call will look like (with changes indicated): [block:code] { "codes": [ { "code": "$p('track', {\n opts: {page: 2}, // or whatever your page number is. This helps us separately track the different pages despite them having the same widget name\n elements: document.querySelectorAll('selector that matches ONLY the recommendations on that page'), // Be careful about colliding selectors in the case that all the recommendation pages are in the same DOM, e.g., in an infinite scroll or feed of recommendations\n name: 'your widget name', // widget name can be the same across the different pages\n source: 'LI' // or 'base' if it's the base slice\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Consistency" } [/block] In some cases, you care about consistency for paginated recommendations: if a user returns to a page the user has already visited, then the user should see the same recommendations that he or she already saw. For an infinite scroll or single-page app, where you are storing the already-visited recommendations in the DOM, consistency is automatic. In other cases, you would need to store the recommendations rendered on already-visited pages in the client's local storage. If the end user revisits a page, then the recommendations get pulled from local storage, thereby guaranteeing consistency. [block:api-header] { "type": "basic", "title": "Deduplication" } [/block] In most cases, you'd want to make sure that the recommendations shown on different pages are different from each other. There are two ways of doing the deduplication: * Implicit deduplication (handled by LiftIgniter): LiftIgniter automatically deduplicates recommendations across pages using a pageviewId field that is automatically packaged in by our JavaScipt SDK. However, this deduplication happens only between recommendations *returned by* LiftIgniter. **We must get a widget_shown** event in order to deduplicate. It may not work correctly if: ** the user navigates between multiple URLs of the site and then returns to an earlier URL (as we keep server-side records for only one current page/URL). If you are doing an API integration, you must explicitly include a value for the pageviewId across all your widget requests so that we know each request is for the same current page and that the user has not moved off the current URL. ** A widget_shown event is not received - our models will interpret this as though the items were not loaded on the page, and are therefore still valid recommendations * Explicit deduplication: You can send `excludeItems` in your query with a list of the items that have already been shown and that you wish to exclude.