{"_id":"57d8b881608ea00e00f3578e","__v":0,"category":{"_id":"56a2c48a831e2a0d0069b1ad","version":"5668fab608f90021008e8832","__v":5,"project":"5668fab608f90021008e882f","pages":["56a2c4990aefae0d00b7fee4","56a2c4a342dfda0d000463a3","56a2c4bf06150b0d002ad262","56a2c4dd2029df19002b595c","56ec9485406ab51700200633"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-01-23T00:08:42.770Z","from_sync":false,"order":9,"slug":"debugging","title":"Web Debugging"},"parentDoc":null,"project":"5668fab608f90021008e882f","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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-09-14T02:40:01.515Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"Depending on how you integrate LiftIgniter, there may be issues with the load order between different components of the page. The various possible issues, and ways to address them, are discussed below.\n\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. LiftIgniter SDK functions called before LiftIgniter snippet loads\"\n}\n[/block]\nYou need to make sure that you execute LiftIgniter SDK functions (the `$p` functions) *after* the LiftIgniter snippet is executed.\n\nIt is *not* necessary for the actual Javascript file loaded by the snippet to be fully downloaded before you can call the SDK functions. This is because the snippet contains logic to maintain all `$p` calls in a queue until the full Javascript file is available.\n\nHowever, it *is* necessary for the snippet itself to be executed, otherwise your browser has no idea what `$p` is referring to.\n\nIf you are using Google Tag Manager for the snippet, but calling the SDK functions outside of Google Tag Manager, things can get tricky, since Google Tag Manager *itself* loads asynchronously (so it is not guaranteed to have executed the snippet by the time you call the SDK functions). We therefore recommend that you put our snippet in the HEAD of your raw page HTML directly, or you use some other method to make sure that GTM has executed the snippet before you run SDK functions.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2. LiftIgniter recommendations are trying to overwrite a widget that hasn't loaded\"\n}\n[/block]\nIf you are [Overwriting Widgets](doc:overwriting-widgets) (that already have recommendations) with LiftIgniter recommendations, the overwriting logic should be executed *after* the widget being overwritten has loaded. Note that you can still register and fetch recommendations *before* the widget has loaded, as long as you know how many recommendations to fetch.\n\nIf you have jQuery installed, you can wrap your overwrite callback inside jQuery. This will work if your base recommendations are being loaded as part of the DOM. An example is provided below.\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"       $p('register',\\n            {\\n                max: 3,\\n                widget: 'your-widget-name',\\n                callback: function(resp) {\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tjQuery(function() {\\n                        overwrite_callback(resp);\\n                        // track overwritten areas as 'LI' slice.\\n                        trackAlgo('LI');\\n                    });\\n                }\\n            }\\n        );\\n    } \",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIf your base recommendations that you want to replace are *not* part of the DOM, you will have to figure out a way to determine if they have loaded. In the worst case, you can just wait a fixed amount of time using Javascript's `setTimeout` function before executing the overwrite callback.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3. Tracking is being called before the recommendations are loaded\"\n}\n[/block]\nFor LiftIgniter recommendations, you need to make sure that the call to the track function happens *after* the rendering logic, *within* the same callback. Then, as long as the rendering happens correctly, the tracking will happen correctly. In particular, if you have wrapped the rendering logic inside a jQuery or any other listener, you should put the tracking logic after the rendering logic inside the same callback.\n\nFor the base recommendations, you need to make sure that the call to the track function happens after the base recommendations have loaded. Similar to the example in Section 2 for overwriting, you can use jQuery to detect page load. This works if the base recommendations are loaded as part of the DOM.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"        // track marked areas as 'base' or original slice.\\n        jQuery(function() {\\n            trackAlgo('base');\\n        });\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"load-order","type":"basic","title":"Load order"}
Depending on how you integrate LiftIgniter, there may be issues with the load order between different components of the page. The various possible issues, and ways to address them, are discussed below. [block:api-header] { "type": "basic", "title": "1. LiftIgniter SDK functions called before LiftIgniter snippet loads" } [/block] You need to make sure that you execute LiftIgniter SDK functions (the `$p` functions) *after* the LiftIgniter snippet is executed. It is *not* necessary for the actual Javascript file loaded by the snippet to be fully downloaded before you can call the SDK functions. This is because the snippet contains logic to maintain all `$p` calls in a queue until the full Javascript file is available. However, it *is* necessary for the snippet itself to be executed, otherwise your browser has no idea what `$p` is referring to. If you are using Google Tag Manager for the snippet, but calling the SDK functions outside of Google Tag Manager, things can get tricky, since Google Tag Manager *itself* loads asynchronously (so it is not guaranteed to have executed the snippet by the time you call the SDK functions). We therefore recommend that you put our snippet in the HEAD of your raw page HTML directly, or you use some other method to make sure that GTM has executed the snippet before you run SDK functions. [block:api-header] { "type": "basic", "title": "2. LiftIgniter recommendations are trying to overwrite a widget that hasn't loaded" } [/block] If you are [Overwriting Widgets](doc:overwriting-widgets) (that already have recommendations) with LiftIgniter recommendations, the overwriting logic should be executed *after* the widget being overwritten has loaded. Note that you can still register and fetch recommendations *before* the widget has loaded, as long as you know how many recommendations to fetch. If you have jQuery installed, you can wrap your overwrite callback inside jQuery. This will work if your base recommendations are being loaded as part of the DOM. An example is provided below. [block:code] { "codes": [ { "code": " $p('register',\n {\n max: 3,\n widget: 'your-widget-name',\n callback: function(resp) {\n\t\t\t\t\t\t\t\t\t\tjQuery(function() {\n overwrite_callback(resp);\n // track overwritten areas as 'LI' slice.\n trackAlgo('LI');\n });\n }\n }\n );\n } ", "language": "javascript" } ] } [/block] If your base recommendations that you want to replace are *not* part of the DOM, you will have to figure out a way to determine if they have loaded. In the worst case, you can just wait a fixed amount of time using Javascript's `setTimeout` function before executing the overwrite callback. [block:api-header] { "type": "basic", "title": "3. Tracking is being called before the recommendations are loaded" } [/block] For LiftIgniter recommendations, you need to make sure that the call to the track function happens *after* the rendering logic, *within* the same callback. Then, as long as the rendering happens correctly, the tracking will happen correctly. In particular, if you have wrapped the rendering logic inside a jQuery or any other listener, you should put the tracking logic after the rendering logic inside the same callback. For the base recommendations, you need to make sure that the call to the track function happens after the base recommendations have loaded. Similar to the example in Section 2 for overwriting, you can use jQuery to detect page load. This works if the base recommendations are loaded as part of the DOM. [block:code] { "codes": [ { "code": " // track marked areas as 'base' or original slice.\n jQuery(function() {\n trackAlgo('base');\n });", "language": "javascript" } ] } [/block]