Home > Technical & Creative Skills > Programming, Servers & Scripts

Device Type in URL? (3)


03-06-2017 09:28 PM #1 sharingan_eyes (AMC Alumnus)
Device Type in URL?

Hello,

When I see a device type script on a lander for a phone, do I need to pass device type in the actual lander URL, or can the script still access that information the same way the tracker accesses that info without it all being in the URL string (using volumm).

For example:

<script>document.write(getURLParameter("brand") + (" ") + getURLParameter("model"))</script>S

Thanks


03-06-2017 11:51 PM #2 chris_climbs (Member)

I'm a little confused as to your question, but here's my best shot:

Regardless of which getURLParameter script you use, those parameters need to be IN THE URL (at least on page load) in order to be plucked out with that method call. In Voluum, you will pass these in the URL that you set up when setting up a lander. So you'll set your lander up, build the url like: http://YOURURL.xyz/camps/lander1/?brand={brand}&model={model} .

When your camp link is clicked, Voluum will figure out all of these things, add its own normal stuff "&volumdata=BASE64sdlkflkdsflkj" etc, then add in any custom tokens you set up when setting up the lander. This is how you'll get to it from your scripts.

Now a few tips as far as scripts go. I've figured out a pretty slick way of passing the tokens, but then REMOVING them with JS after page load, so they don't ugly up the url for your visitor. You can still access in your scripts. This works in conjunction with my 'back' script. You can modify the back script to still act normally, if you'd like, to redirect to your click URL, or send it to a smart link...up to you.

First the backscript:

Code:
window.history.replaceState(null, '', window.location.pathname + "#!/back");
window.history.pushState(null, '', window.location.pathname);
window.addEventListener("popstate", function() {
  if (location.hash === "#!/back") {
      setTimeout(function() {
          location.replace("**BACKREDIRECT**");
      }, 0);
  }
}, false);
I wont get crazy into the possibilities with that, but replace "**BACKREDIRECT**" with the url you want the back button to go to. If you don't want it to use the backscript too (I really dont see why not), you can drop the event listener, and only use the first two lines to "erase" your query strings from the URL.

So this script is a back script, but the first two lines basically clean up your url, after load, and after the JS has your tokens

Then use this getURLParameter to be able to have default settings. NOTE: NOT ALL getURLParameters are the same, and NOT ALL will function properly against all edge cases that can occur when trying to set defaults, considering "blank" tokens (i.e. you set it up to pass {carrier}, but someone browses on wifi, so voluum passes empty string there) etc. I've tested this specific script pretty well for most of those edge cases, but ymmv.


Code:
function getURLParameter(name) {
  var name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
  var results = regex.exec(location.search);
  return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}


var city    = (cityParam = getURLParameter('city')) ? cityParam : 'Manila';
var country = (countryParam = getURLParameter('country')) ? countryParam : 'Philippines';
var brand = (brandParam = getURLParameter('brand')) ? brandParam : '';
var model = (modelParam = getURLParameter('model')) ? modelParam : 'mobile device';
var carrier = (carrierParam = getURLParameter('carrier')) ? carrierParam : 'mobile device';
Using this, you can set defaults, in case, for whatever reason, they don't get passed (you forget to set it up right in Voluum, missing data, etc). in the quotes where things say 'Manila', 'mobile device', etc. type in your default values.

NOTE: in your copy, you will now write
Code:
<script>document.write(brand+' '+model)</script>
instead of calling the function, since you've defined each param as a variable. Put these in your HTML <head> . I think this is nicer...

Anyway, using both together, you'll get a nice clean URL, you'll have access to all your params, and you'll have defaults in place for redundancy and in case of mistake To answer the real question (lol, I went on a tangent...hopefully it helps someone; and please test this stuff out -- dont just blindly trust me ), yes, you have to pass them in Voluum first though


03-07-2017 02:54 AM #3 vortex (Senior Moderator)

Wow Chris thanks for going to such lengths to help out a fellow member! Thank you very much!

@sharingan_eyes: Passing parameters via lander url tokens as Chris has laid out in detail would be the easiest way. The alternative would be to use extra scripts and databases. For example this script for detecting mobile devices:

http://mobiledetect.net/

I've never used this or similar scripts so don't know if it works, just saying there are solutions out there you can test.

For stuff like country and carrier, you'd need to tap into an IP database such as Maxmind. That would mean extra costs and trouble. Is there a particular reason why you're wanting to avoid passing parameters via the url?



Amy


Home > Technical & Creative Skills > Programming, Servers & Scripts