{"_id":"59c2d8eefdbe55002696aaec","project":"5668fab608f90021008e882f","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":"569742b58560a60d00e2c25d","__v":2,"pages":["5697436959a6692d003fad90","5697445759a6692d003fad92"],"project":"5668fab608f90021008e882f","version":"5668fab608f90021008e8832","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-01-14T06:39:49.331Z","from_sync":false,"order":4,"slug":"javascript-integration-guide","title":"Javascript SDK Integration Guide"},"user":"5668fa9755e4b32100935d41","githubsync":"","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-09-20T21:09:02.096Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"When you send pageviews or activities to LiftIgniter, you want to make sure that the URL/ID of inventory in context matches what's stored on LiftIgniter's server side. However, this can be difficult due to URL query parameters that could get overloaded due to various reasons. For instance,\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Actual ID of item stored on LiftIgniter's side\\n\\\"http://abc.com/article?id=134\\\" // full URL\\n\\\"134\\\" // Internal ID\\n\\n// A url on user's browser that contains arbitrary url parameters\\n\\\"http://abc.com/article?id=134&campaign=123\\\"\\n\\n// Your site migrated to HTTPS, but the items registered on our side are still in HTTP\\n\\\"https://abc.com/article?id=134\\\"\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIn this case, you can use `$p(\"init\")` configurations or `$p(\"send\")` to modify the URL. You can handle transformation of URL in one of the following ways.\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Following examples are only to give you an idea of what you could do\",\n  \"body\": \"The actual implementation can be done in any way the suits your preference or practice.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"1. Using $p('init')\"\n}\n[/block]\nFollowing is an example of initializing the client with custom configuration. Read [this](https://liftigniter.readme.io/docs/pinit) documentation for further details on the `$p('init')` function.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Loading JS SDK\\nif (typeof $igniter_var === 'undefined') {\\n// Ensures that our client code is updated.\\n(function(w,d,s,p,v,e,r) {w.$ps = (w.performance && w.performance.now && typeof(w.performance.now) == \\\"function\\\") ? w.performance.now() : undefined;w['$igniter_var']=v;w[v]=w[v]||function(){(w[v].q=w[v].q||[]).push(\\narguments)};w[v].l=1*new Date();e=d.createElement(s),r=d.getElementsByTagName(s)[0];e.async=1;\\ne.src=p+'?ts='+(+new Date()/3600000|0);\\nr.parentNode.insertBefore(e,r)})(window,document,'script','//cdn.petametrics.com/{JAVASCRIPT_KEY}.js','$p');\\n// Don't forget to REPLACE JAVASCRIPT_KEY for cdn url.\\n\\nvar customConfig = {\\n  activity: {\\n    canonicalUrlTransform: function(url){return url}\\n  }\\n}\\n\\n$p(\\\"init\\\", {JAVASCRIPT_KEY}, {config: customConfig}); // REPLACE JAVASCRIPT_KEY\\n$p(\\\"send\\\", \\\"pageview\\\");\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe important thing to note here is the `canonicalUrlTransform` key in the `customConfig.activity` object. The `url` argument of the function is user's current canonical URL.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Given\\n\\\"http://abc.com/article?id=134&campaign=123\\\"\\n\\n// Let's say that \\\"id\\\" was used as the item key uploaded to LI, then you would want the following to be sent on pageviews\\n\\\"134\\\"\\n\\n// Following configuration will run the custom canonicalUrlTransform on every pageview/activities you send over to our side.\\nvar customConfig = {\\n  activity: {\\n    canonicalUrlTransform: function(url){\\n      // Use window.location.href instead of using url passed in as argument\\n      var urlHref = window.location.href\\n      var transformed = url // set current canonical url as default return value.\\n    \\tif(urlHref.split('?')[1]) {\\n        var params = urlHref.split('?')[1].split('&')\\n        for(var i = 0; i < params.length; i++) {\\n        \\tif(params[i].split('=')[0] == \\\"id\\\") {\\n          \\ttransformed = params[i].split('=')[1]\\n          }\\n        }\\n      } \\n      return transformed\\n    }\\n  }\\n}\\n\\n\\n// Given\\n\\\"http://abc.com/article?id=134&campaign=123\\\"\\n\\n// Let's say that url only including 'id' was used as the item key uploaded to LI, then you would want the following to be sent on pageviews\\n\\\"http://abc.com/article?id=134\\\"\\n\\n// Following configuration will handle parameter stripping\\nvar customConfig = {\\n  activity: {\\n    canonicalUrlTransform: function(url){\\n      // Use window.location.href instead of using url passed in as argument\\n      var urlHref = window.location.href\\n      var transformed = url // set current canonical url as default return value.\\n    \\tif(urlHref.split('?')[1]) {\\n        var params = urlHref.split('?')[1].split('&')\\n        for(var i = 0; i < params.length; i++) {\\n        \\tif(params[i].split('=')[0] == \\\"id\\\") {\\n          \\ttransformed = urlHref.split('?')[0] + '?' + params[i]\\n          }\\n        }\\n      } \\n      return transformed\\n    }\\n  }\\n}\\n\\n\\n// Given\\n\\\"https://abc.com/article?id=134\\\"\\n\\n// Let's say you want all activities sent to our side to have http so it matches inventory data on our side.\\n\\\"http://abc.com/article?id=134\\\"\\n\\nvar customConfig = {\\n  activity: {\\n    canonicalUrlTransform: function(url){\\n      return window.location.href.replace(\\\"https://\\\",\\\"http://\\\")\\n    }\\n  }\\n}\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"2. Using $p('send')\"\n}\n[/block]\nTo read up on `$p('send')`, you can reference [this](https://liftigniter.readme.io/docs/psend).\n\nThe send function takes in an object argument that has the context at the time the function is called. This custom context takes precedence over existing values under the same key, so you can overwrite `ccu` key, which stands for Current Canonical Url, and value under this key is used to match it with inventory you upload to our end.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Loading JS SDK\\nif (typeof $igniter_var === 'undefined') {\\n// Ensures that our client code is updated.\\n(function(w,d,s,p,v,e,r) {w.$ps = (w.performance && w.performance.now && typeof(w.performance.now) == \\\"function\\\") ? w.performance.now() : undefined;w['$igniter_var']=v;w[v]=w[v]||function(){(w[v].q=w[v].q||[]).push(\\narguments)};w[v].l=1*new Date();e=d.createElement(s),r=d.getElementsByTagName(s)[0];e.async=1;\\ne.src=p+'?ts='+(+new Date()/3600000|0);\\nr.parentNode.insertBefore(e,r)})(window,document,'script','//cdn.petametrics.com/{JAVASCRIPT_KEY}.js','$p');\\n// Don't forget to REPLACE JAVASCRIPT_KEY for cdn url.\\n\\nvar canonicalUrlTransform = function(url){\\n  // Use window.location.href instead of using url passed in as argument\\n  var urlHref = window.location.href\\n  var transformed = url // set current canonical url as default return value.\\n  if(urlHref.split('?')[1]) {\\n    var params = urlHref.split('?')[1].split('&')\\n    for(var i = 0; i < params.length; i++) {\\n      if(params[i].split('=')[0] == \\\"id\\\") {\\n        transformed = params[i].split('=')[1]\\n      }\\n    }\\n  } \\n  return transformed\\n}\\n\\n$p(\\\"init\\\", {JAVASCRIPT_KEY}); // REPLACE JAVASCRIPT_KEY\\n$p(\\\"send\\\", \\\"pageview\\\", {\\n\\tccu: canonicalUrlTransform() // overrides whatever url value that is sent over to us under ccu.\\n});\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nHowever, note that this would require you to override `ccu` field every time you send an event.\n[block:api-header]\n{\n  \"title\": \"3. Using global context\"\n}\n[/block]\nAlternative is to set the `ccu` once when the page is loaded in the following way:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Loading JS SDK\\nif (typeof $igniter_var === 'undefined') {\\n// Ensures that our client code is updated.\\n(function(w,d,s,p,v,e,r) {w.$ps = (w.performance && w.performance.now && typeof(w.performance.now) == \\\"function\\\") ? w.performance.now() : undefined;w['$igniter_var']=v;w[v]=w[v]||function(){(w[v].q=w[v].q||[]).push(\\narguments)};w[v].l=1*new Date();e=d.createElement(s),r=d.getElementsByTagName(s)[0];e.async=1;\\ne.src=p+'?ts='+(+new Date()/3600000|0);\\nr.parentNode.insertBefore(e,r)})(window,document,'script','//cdn.petametrics.com/{JAVASCRIPT_KEY}.js','$p');\\n// Don't forget to REPLACE JAVASCRIPT_KEY for cdn url.\\n\\nvar canonicalUrlTransform = function(url){\\n  // Use window.location.href instead of using url passed in as argument\\n  var urlHref = window.location.href\\n  var transformed = url // set current canonical url as default return value.\\n  if(urlHref.split('?')[1]) {\\n    var params = urlHref.split('?')[1].split('&')\\n    for(var i = 0; i < params.length; i++) {\\n      if(params[i].split('=')[0] == \\\"id\\\") {\\n        transformed = params[i].split('=')[1]\\n      }\\n    }\\n  } \\n  return transformed\\n}\\n\\nvar customConfig = {\\n  globalCtx: {ccu : canonicalUrlTransform()}\\n}\\n\\n\\n$p(\\\"init\\\", {JAVASCRIPT_KEY}); // REPLACE JAVASCRIPT_KEY\\n$p(\\\"send\\\", \\\"pageview\\\");\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis will override `ccu` on every activity events with the value you specified after loading the script.\n[block:api-header]\n{\n  \"title\": \"Transforming URL/ID on widget Activity\"\n}\n[/block]\nSetting the following key-value on custom config document will apply the defined function on every URL that's on the widget. `trackingTransUrl` is described in `$p('init')` documentation.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var customConfig = {\\n  trackingTransUrl: function(url){\\n    return custom_transformation(url);\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"custom-urlid-transformation","type":"basic","title":"Custom URL/ID transformation"}

Custom URL/ID transformation


When you send pageviews or activities to LiftIgniter, you want to make sure that the URL/ID of inventory in context matches what's stored on LiftIgniter's server side. However, this can be difficult due to URL query parameters that could get overloaded due to various reasons. For instance, [block:code] { "codes": [ { "code": "// Actual ID of item stored on LiftIgniter's side\n\"http://abc.com/article?id=134\" // full URL\n\"134\" // Internal ID\n\n// A url on user's browser that contains arbitrary url parameters\n\"http://abc.com/article?id=134&campaign=123\"\n\n// Your site migrated to HTTPS, but the items registered on our side are still in HTTP\n\"https://abc.com/article?id=134\"", "language": "javascript" } ] } [/block] In this case, you can use `$p("init")` configurations or `$p("send")` to modify the URL. You can handle transformation of URL in one of the following ways. [block:callout] { "type": "info", "title": "Following examples are only to give you an idea of what you could do", "body": "The actual implementation can be done in any way the suits your preference or practice." } [/block] [block:api-header] { "title": "1. Using $p('init')" } [/block] Following is an example of initializing the client with custom configuration. Read [this](https://liftigniter.readme.io/docs/pinit) documentation for further details on the `$p('init')` function. [block:code] { "codes": [ { "code": "// Loading JS SDK\nif (typeof $igniter_var === 'undefined') {\n// Ensures that our client code is updated.\n(function(w,d,s,p,v,e,r) {w.$ps = (w.performance && w.performance.now && typeof(w.performance.now) == \"function\") ? w.performance.now() : undefined;w['$igniter_var']=v;w[v]=w[v]||function(){(w[v].q=w[v].q||[]).push(\narguments)};w[v].l=1*new Date();e=d.createElement(s),r=d.getElementsByTagName(s)[0];e.async=1;\ne.src=p+'?ts='+(+new Date()/3600000|0);\nr.parentNode.insertBefore(e,r)})(window,document,'script','//cdn.petametrics.com/{JAVASCRIPT_KEY}.js','$p');\n// Don't forget to REPLACE JAVASCRIPT_KEY for cdn url.\n\nvar customConfig = {\n activity: {\n canonicalUrlTransform: function(url){return url}\n }\n}\n\n$p(\"init\", {JAVASCRIPT_KEY}, {config: customConfig}); // REPLACE JAVASCRIPT_KEY\n$p(\"send\", \"pageview\");\n}", "language": "javascript" } ] } [/block] The important thing to note here is the `canonicalUrlTransform` key in the `customConfig.activity` object. The `url` argument of the function is user's current canonical URL. [block:code] { "codes": [ { "code": "// Given\n\"http://abc.com/article?id=134&campaign=123\"\n\n// Let's say that \"id\" was used as the item key uploaded to LI, then you would want the following to be sent on pageviews\n\"134\"\n\n// Following configuration will run the custom canonicalUrlTransform on every pageview/activities you send over to our side.\nvar customConfig = {\n activity: {\n canonicalUrlTransform: function(url){\n // Use window.location.href instead of using url passed in as argument\n var urlHref = window.location.href\n var transformed = url // set current canonical url as default return value.\n \tif(urlHref.split('?')[1]) {\n var params = urlHref.split('?')[1].split('&')\n for(var i = 0; i < params.length; i++) {\n \tif(params[i].split('=')[0] == \"id\") {\n \ttransformed = params[i].split('=')[1]\n }\n }\n } \n return transformed\n }\n }\n}\n\n\n// Given\n\"http://abc.com/article?id=134&campaign=123\"\n\n// Let's say that url only including 'id' was used as the item key uploaded to LI, then you would want the following to be sent on pageviews\n\"http://abc.com/article?id=134\"\n\n// Following configuration will handle parameter stripping\nvar customConfig = {\n activity: {\n canonicalUrlTransform: function(url){\n // Use window.location.href instead of using url passed in as argument\n var urlHref = window.location.href\n var transformed = url // set current canonical url as default return value.\n \tif(urlHref.split('?')[1]) {\n var params = urlHref.split('?')[1].split('&')\n for(var i = 0; i < params.length; i++) {\n \tif(params[i].split('=')[0] == \"id\") {\n \ttransformed = urlHref.split('?')[0] + '?' + params[i]\n }\n }\n } \n return transformed\n }\n }\n}\n\n\n// Given\n\"https://abc.com/article?id=134\"\n\n// Let's say you want all activities sent to our side to have http so it matches inventory data on our side.\n\"http://abc.com/article?id=134\"\n\nvar customConfig = {\n activity: {\n canonicalUrlTransform: function(url){\n return window.location.href.replace(\"https://\",\"http://\")\n }\n }\n}\n", "language": "javascript" } ] } [/block] [block:api-header] { "title": "2. Using $p('send')" } [/block] To read up on `$p('send')`, you can reference [this](https://liftigniter.readme.io/docs/psend). The send function takes in an object argument that has the context at the time the function is called. This custom context takes precedence over existing values under the same key, so you can overwrite `ccu` key, which stands for Current Canonical Url, and value under this key is used to match it with inventory you upload to our end. [block:code] { "codes": [ { "code": "// Loading JS SDK\nif (typeof $igniter_var === 'undefined') {\n// Ensures that our client code is updated.\n(function(w,d,s,p,v,e,r) {w.$ps = (w.performance && w.performance.now && typeof(w.performance.now) == \"function\") ? w.performance.now() : undefined;w['$igniter_var']=v;w[v]=w[v]||function(){(w[v].q=w[v].q||[]).push(\narguments)};w[v].l=1*new Date();e=d.createElement(s),r=d.getElementsByTagName(s)[0];e.async=1;\ne.src=p+'?ts='+(+new Date()/3600000|0);\nr.parentNode.insertBefore(e,r)})(window,document,'script','//cdn.petametrics.com/{JAVASCRIPT_KEY}.js','$p');\n// Don't forget to REPLACE JAVASCRIPT_KEY for cdn url.\n\nvar canonicalUrlTransform = function(url){\n // Use window.location.href instead of using url passed in as argument\n var urlHref = window.location.href\n var transformed = url // set current canonical url as default return value.\n if(urlHref.split('?')[1]) {\n var params = urlHref.split('?')[1].split('&')\n for(var i = 0; i < params.length; i++) {\n if(params[i].split('=')[0] == \"id\") {\n transformed = params[i].split('=')[1]\n }\n }\n } \n return transformed\n}\n\n$p(\"init\", {JAVASCRIPT_KEY}); // REPLACE JAVASCRIPT_KEY\n$p(\"send\", \"pageview\", {\n\tccu: canonicalUrlTransform() // overrides whatever url value that is sent over to us under ccu.\n});\n}", "language": "javascript" } ] } [/block] However, note that this would require you to override `ccu` field every time you send an event. [block:api-header] { "title": "3. Using global context" } [/block] Alternative is to set the `ccu` once when the page is loaded in the following way: [block:code] { "codes": [ { "code": "// Loading JS SDK\nif (typeof $igniter_var === 'undefined') {\n// Ensures that our client code is updated.\n(function(w,d,s,p,v,e,r) {w.$ps = (w.performance && w.performance.now && typeof(w.performance.now) == \"function\") ? w.performance.now() : undefined;w['$igniter_var']=v;w[v]=w[v]||function(){(w[v].q=w[v].q||[]).push(\narguments)};w[v].l=1*new Date();e=d.createElement(s),r=d.getElementsByTagName(s)[0];e.async=1;\ne.src=p+'?ts='+(+new Date()/3600000|0);\nr.parentNode.insertBefore(e,r)})(window,document,'script','//cdn.petametrics.com/{JAVASCRIPT_KEY}.js','$p');\n// Don't forget to REPLACE JAVASCRIPT_KEY for cdn url.\n\nvar canonicalUrlTransform = function(url){\n // Use window.location.href instead of using url passed in as argument\n var urlHref = window.location.href\n var transformed = url // set current canonical url as default return value.\n if(urlHref.split('?')[1]) {\n var params = urlHref.split('?')[1].split('&')\n for(var i = 0; i < params.length; i++) {\n if(params[i].split('=')[0] == \"id\") {\n transformed = params[i].split('=')[1]\n }\n }\n } \n return transformed\n}\n\nvar customConfig = {\n globalCtx: {ccu : canonicalUrlTransform()}\n}\n\n\n$p(\"init\", {JAVASCRIPT_KEY}); // REPLACE JAVASCRIPT_KEY\n$p(\"send\", \"pageview\");\n}", "language": "javascript" } ] } [/block] This will override `ccu` on every activity events with the value you specified after loading the script. [block:api-header] { "title": "Transforming URL/ID on widget Activity" } [/block] Setting the following key-value on custom config document will apply the defined function on every URL that's on the widget. `trackingTransUrl` is described in `$p('init')` documentation. [block:code] { "codes": [ { "code": "var customConfig = {\n trackingTransUrl: function(url){\n return custom_transformation(url);\n }\n}", "language": "javascript" } ] } [/block]