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,

// Actual ID of item stored on LiftIgniter's side
"http://abc.com/article?id=134" // full URL
"134" // Internal ID

// A url on user's browser that contains arbitrary url parameters
"http://abc.com/article?id=134&campaign=123"

// Your site migrated to HTTPS, but the items registered on our side are still in HTTP
"https://abc.com/article?id=134"

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.

📘
Following examples are only to give you an idea of what you could do
The actual implementation can be done in any way the suits your preference or practice.

1. Using $p('init')

Following is an example of initializing the client with custom configuration. Read this documentation for further details on the $p('init') function.

// Loading JS SDK
if (typeof $igniter_var === 'undefined') {
// Ensures that our client code is updated.
(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(
arguments)};w[v].l=1*new Date();e=d.createElement(s),r=d.getElementsByTagName(s)[0];e.async=1;
e.src=p+'?ts='+(+new Date()/3600000|0);
r.parentNode.insertBefore(e,r)})(window,document,'script','//cdn.petametrics.com/{JAVASCRIPT_KEY}.js','$p');
// Don't forget to REPLACE JAVASCRIPT_KEY for cdn url.

var customConfig = {
  activity: {
    canonicalUrlTransform: function(url){return url}
  }
}

$p("init", {JAVASCRIPT_KEY}, {config: customConfig}); // REPLACE JAVASCRIPT_KEY
$p("send", "pageview");
}

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.

// Given
"http://abc.com/article?id=134&campaign=123"

// 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
"134"

// Following configuration will run the custom canonicalUrlTransform on every pageview/activities you send over to our side.
var customConfig = {
  activity: {
    canonicalUrlTransform: function(url){
      // Use window.location.href instead of using url passed in as argument
      var urlHref = window.location.href
      var transformed = url // set current canonical url as default return value.
    	if(urlHref.split('?')[1]) {
        var params = urlHref.split('?')[1].split('&')
        for(var i = 0; i < params.length; i++) {
        	if(params[i].split('=')[0] == "id") {
          	transformed = params[i].split('=')[1]
          }
        }
      } 
      return transformed
    }
  }
}


// Given
"http://abc.com/article?id=134&campaign=123"

// 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
"http://abc.com/article?id=134"

// Following configuration will handle parameter stripping
var customConfig = {
  activity: {
    canonicalUrlTransform: function(url){
      // Use window.location.href instead of using url passed in as argument
      var urlHref = window.location.href
      var transformed = url // set current canonical url as default return value.
    	if(urlHref.split('?')[1]) {
        var params = urlHref.split('?')[1].split('&')
        for(var i = 0; i < params.length; i++) {
        	if(params[i].split('=')[0] == "id") {
          	transformed = urlHref.split('?')[0] + '?' + params[i]
          }
        }
      } 
      return transformed
    }
  }
}


// Given
"https://abc.com/article?id=134"

// Let's say you want all activities sent to our side to have http so it matches inventory data on our side.
"http://abc.com/article?id=134"

var customConfig = {
  activity: {
    canonicalUrlTransform: function(url){
      return window.location.href.replace("https://","http://")
    }
  }
}

2. Using $p('send')

To read up on $p('send'), you can reference this.

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.

// Loading JS SDK
if (typeof $igniter_var === 'undefined') {
// Ensures that our client code is updated.
(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(
arguments)};w[v].l=1*new Date();e=d.createElement(s),r=d.getElementsByTagName(s)[0];e.async=1;
e.src=p+'?ts='+(+new Date()/3600000|0);
r.parentNode.insertBefore(e,r)})(window,document,'script','//cdn.petametrics.com/{JAVASCRIPT_KEY}.js','$p');
// Don't forget to REPLACE JAVASCRIPT_KEY for cdn url.

var canonicalUrlTransform = function(url){
  // Use window.location.href instead of using url passed in as argument
  var urlHref = window.location.href
  var transformed = url // set current canonical url as default return value.
  if(urlHref.split('?')[1]) {
    var params = urlHref.split('?')[1].split('&')
    for(var i = 0; i < params.length; i++) {
      if(params[i].split('=')[0] == "id") {
        transformed = params[i].split('=')[1]
      }
    }
  } 
  return transformed
}

$p("init", {JAVASCRIPT_KEY}); // REPLACE JAVASCRIPT_KEY
$p("send", "pageview", {
	ccu: canonicalUrlTransform() // overrides whatever url value that is sent over to us under ccu.
});
}

However, note that this would require you to override ccu field every time you send an event.

3. Using global context

Alternative is to set the ccu once when the page is loaded in the following way:

// Loading JS SDK
if (typeof $igniter_var === 'undefined') {
// Ensures that our client code is updated.
(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(
arguments)};w[v].l=1*new Date();e=d.createElement(s),r=d.getElementsByTagName(s)[0];e.async=1;
e.src=p+'?ts='+(+new Date()/3600000|0);
r.parentNode.insertBefore(e,r)})(window,document,'script','//cdn.petametrics.com/{JAVASCRIPT_KEY}.js','$p');
// Don't forget to REPLACE JAVASCRIPT_KEY for cdn url.

var canonicalUrlTransform = function(url){
  // Use window.location.href instead of using url passed in as argument
  var urlHref = window.location.href
  var transformed = url // set current canonical url as default return value.
  if(urlHref.split('?')[1]) {
    var params = urlHref.split('?')[1].split('&')
    for(var i = 0; i < params.length; i++) {
      if(params[i].split('=')[0] == "id") {
        transformed = params[i].split('=')[1]
      }
    }
  } 
  return transformed
}

var customConfig = {
  globalCtx: {ccu : canonicalUrlTransform()}
}


$p("init", {JAVASCRIPT_KEY}); // REPLACE JAVASCRIPT_KEY
$p("send", "pageview");
}

This will override ccu on every activity events with the value you specified after loading the script.

Transforming URL/ID on widget Activity

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.

var customConfig = {
  trackingTransURL: function(url){
    return custom_transformation(url);
  }
}

📘Following examples are only to give you an idea of what you could do

1. Using $p('init')

2. Using $p('send')

3. Using global context

Transforming URL/ID on widget Activity

📘
Following examples are only to give you an idea of what you could do