Change landing page based on time zone with Javascript

[Kassia_Wilhelm]

I am setting up a webinar that I want to show in the user's time zone - everyone seeing the landing page is already in Marketo and has a Time Zone field populated for them. I wrote an email script token to change the time zone in emails, now I want the landing page to also change the time zone displayed but there is nothing like an email script token for landing pages. I wrote some javascript to try to populate a <span> that I put an ID on based on the lead's Time Zone field. However, the Javascript isn't working.

I think what's breaking is the way I'm referencing the lead field - how do you reference a specific lead field in Javascript to populate on a landing page?

I've tried a handful of things, this is where I left off with the HTML element I put on the landing page:

<script language="Javascript" src="/js/public/jquery-latest.min.js" type="text/javascript"></script>

<script src="/js/public/jQueryString-2.0.2-Min.js" type="text/javascript" ></script>

<script type="text/javascript">

window.onload = function () {

var userTimeZone = "[user:TimeZone]";

var tz = "10:00 AM - 10:45 AM PDT";
 

if ("userTimeZone" == "Pacific/Tongatapu") {

tz = "6:00 AM - 6:45 AM TOT";

} else if ("userTimeZone" == "US/Samoa") {

tz = "6:00 AM - 6:45 AM SST";

} else if ("userTimeZone" == "US/Hawaii") {

tz = "7:00 AM - 7:45 AM HAST";

} else if ("userTimeZone" == "US/Aleutian") {

tz = "8:00 AM - 8:45 AM HADT";

} else if ("userTimeZone" == "US/Alaska") {

tz = "9:00 AM - 9:45 AM AKDT";

} else if ("userTimeZone" == "US/Pacific") {

tz = "10:00 AM - 10:45 AM PDT";

} else if ("userTimeZone" == "US/Arizona") {

tz = "10:00 AM - 10:45 AM MST";

} else if ("userTimeZone" == "US/Central") {

tz = "12:00 PM - 12:45 PM CDT";

} else if ("userTimeZone" == "US/Mountain") {

tz = "11:00 AM - 11:45 AM MDT";

} else if ("userTimeZone" == "Canada/Saskatchewan") {

tz = "11:00 AM - 11:45 AM CST";

} else if ("userTimeZone" == "America/Guatemala") {

tz = "11:00 AM - 11:45 AM CST";

} else if ("userTimeZone" == "America/Bogota") {

tz = "12:00 PM - 12:45 PM COT";

} else if ("userTimeZone" == "America/Mexico_City") {

tz = "12:00 PM - 12:45 PM CDT";

} else if ("userTimeZone" == "America/Caracas") {

tz = "12:30 PM - 1:15 PM VET";

} else if ("userTimeZone" == "US/Eastern") {

tz = "1:00 PM - 1:45 PM EDT";

} else if ("userTimeZone" == "America/Santiago") {

tz = "1:00 PM - 1:45 PM CLT";

} else if ("userTimeZone" == "America/La_Paz") {

tz = "1:00 PM - 1:45 PM BOT";

} else if ("userTimeZone" == "Brazil/East") {

tz = "2:00 PM - 2:45 PM BRT";

} else if ("userTimeZone" == "America/Halifax") {

tz = "2:00 PM - 2:45 PM ADT";

} else if ("userTimeZone" == "America/Buenos_Aires") {

tz = "2:00 PM - 2:45 PM ART";

} else if ("userTimeZone" == "America/Montevideo") {

tz = "2:00 PM - 2:45 PM UYT";

} else if ("userTimeZone" == "America/St_Johns") {

tz = "2:30 PM - 3:15 PM NDT";

} else if ("userTimeZone" == "Atlantic/South_Georgia") {

tz = "3:00 PM - 3:45 PM GST";

} else if ("userTimeZone" == "America/Godthab") {

tz = "3:00 PM - 3:45 PM WGST";

} else if ("userTimeZone" == "Atlantic/Cape_Verde") {

tz = "4:00 PM - 4:45 PM CVT";

} else if ("userTimeZone" == "Greenwich") {

tz = "5:00 PM - 5:45 PM GMT";

} else if ("userTimeZone" == "Atlantic/Azores") {

tz = "5:00 PM - 5:45 PM AZOST";

} else if ("userTimeZone" == "Europe/Lisbon") {

tz = "6:00 PM - 6:45 PM WEST";

} else {

tz = "10:00 AM - 10:45 AM PDT - default result";

}

document.getElementById("timeZone").innerHTML = tz;

}

</script>

[Grant_Booth]

How are you setting the userTimeZone variable? Did you use the token? Tokens populate on landing pages just like they do on emails so long as the person visiting the page has been cookied. Like this:
{{lead.Custom Field Name}}

[Kassia_Wilhelm]

I tried referencing the field as {{lead.Time Zone}} in the Javascript and didn't have any luck - it get's encoded (looks like this "&#85;&#83;&#47;&#80;&#97;&#99;&#105;&#102;&#105;&#99;") so it doesn't match the "US/Pacific" format.

Is there a way to decode this before making the comparison?

[Anonymous]

In JavaScript, you need to take off "" around userTimeZone when you are referencing it as a variable in if/elif/else statements. 

<script type="text/javascript">

window.onload = function () {

var userTimeZone = "[user:TimeZone]";

var tz = "10:00 AM - 10:45 AM PDT";

if (userTimeZone == "Pacific/Tongatapu") {

tz = "6:00 AM - 6:45 AM TOT";

} else if (userTimeZone == "US/Samoa") {

tz = "6:00 AM - 6:45 AM SST";

} else if (userTimeZone == "US/Hawaii") {

tz = "7:00 AM - 7:45 AM HAST";

} else if (userTimeZone == "US/Aleutian") {

tz = "8:00 AM - 8:45 AM HADT";

} else if (userTimeZone == "US/Alaska") {

tz = "9:00 AM - 9:45 AM AKDT";

} else if (userTimeZone == "US/Pacific") {

tz = "10:00 AM - 10:45 AM PDT";

} else if (userTimeZone == "US/Arizona") {

tz = "10:00 AM - 10:45 AM MST";

} else if (userTimeZone == "US/Central") {

tz = "12:00 PM - 12:45 PM CDT";

} else if (userTimeZone == "US/Mountain") {

tz = "11:00 AM - 11:45 AM MDT";

} else if (userTimeZone == "Canada/Saskatchewan") {

tz = "11:00 AM - 11:45 AM CST";

} else if (userTimeZone == "America/Guatemala") {

tz = "11:00 AM - 11:45 AM CST";

} else if (userTimeZone == "America/Bogota") {

tz = "12:00 PM - 12:45 PM COT";

} else if (userTimeZone == "America/Mexico_City") {

tz = "12:00 PM - 12:45 PM CDT";

} else if (userTimeZone == "America/Caracas") {

tz = "12:30 PM - 1:15 PM VET";

} else if (userTimeZone == "US/Eastern") {

tz = "1:00 PM - 1:45 PM EDT";

} else if (userTimeZone == "America/Santiago") {

tz = "1:00 PM - 1:45 PM CLT";

} else if (userTimeZone == "America/La_Paz") {

tz = "1:00 PM - 1:45 PM BOT";

} else if (userTimeZone == "Brazil/East") {

tz = "2:00 PM - 2:45 PM BRT";

} else if (userTimeZone == "America/Halifax") {

tz = "2:00 PM - 2:45 PM ADT";

} else if (userTimeZone == "America/Buenos_Aires") {

tz = "2:00 PM - 2:45 PM ART";

} else if (userTimeZone == "America/Montevideo") {

tz = "2:00 PM - 2:45 PM UYT";

} else if (userTimeZone == "America/St_Johns") {

tz = "2:30 PM - 3:15 PM NDT";

} else if (userTimeZone == "Atlantic/South_Georgia") {

tz = "3:00 PM - 3:45 PM GST";

} else if (userTimeZone == "America/Godthab") {

tz = "3:00 PM - 3:45 PM WGST";

} else if (userTimeZone == "Atlantic/Cape_Verde") {

tz = "4:00 PM - 4:45 PM CVT";

} else if (userTimeZone == "Greenwich") {

tz = "5:00 PM - 5:45 PM GMT";

} else if (userTimeZone == "Atlantic/Azores") {

tz = "5:00 PM - 5:45 PM AZOST";

} else if (userTimeZone == "Europe/Lisbon") {

tz = "6:00 PM - 6:45 PM WEST";

} else {

tz = "10:00 AM - 10:45 AM PDT - default result";

}

document.getElementById("timeZone").innerHTML = tz;

};
</script>

[Kassia_Wilhelm]

If I take off the quotes it doesn't even try to run the Javascript. The closest I've gotten is using {{lead.Time Zone}}, but the value needs to be decoded - I'm not sure how to do that.

Thanks for the quick responses!

[Kassia_Wilhelm]

Just in case anyone experiences this issue or one similar, what I ended up having to do (since I couldn't find a good decoding javascript function - there is probably one out there) is ampersand encoding all of my time zones and then putting them in my javascript function: Europe/Lisbon --> &#69;&#117;&#114;&#111;&#112;&#101;&#47;&#76;&#105;&#115;&#98;&#111;&#110; I used this tool: http://coderstoolbox.net/string/#!encoding=xml&action=encode&charset=none with 'XML', 'Encode' and 'None' checked. And this is the syntax that worked:

<script type="text/javascript">

window.onload = function() {

var tz = "10:00 AM - 10:45 AM PDT";

if ("{{lead.Time Zone}}" == "&#80;&#97;&#99;&#105;&#102;&#105;&#99;&#47;&#84;&#111;&#110;&#103;&#97;&#116;&#97;&#112;&#117;") {

tz = "6:00 AM - 6:45 AM TOT";

} else if ("{{lead.Time Zone}}" == "&#85;&#83;&#47;&#83;&#97;&#109;&#111;&#97;") {

tz = "6:00 AM - 6:45 AM SST";

} else if ("{{lead.Time Zone}}" == "&#85;&#83;&#47;&#72;&#97;&#119;&#97;&#105;&#105;") {

tz = "7:00 AM - 7:45 AM HAST";

} else if ("{{lead.Time Zone}}" == "&#85;&#83;&#47;&#65;&#108;&#101;&#117;&#116;&#105;&#97;&#110;") {

tz = "8:00 AM - 8:45 AM HADT";

} else if ("{{lead.Time Zone}}" == "&#85;&#83;&#47;&#65;&#108;&#97;&#115;&#107;&#97;") {

tz = "9:00 AM - 9:45 AM AKDT";

} else if ("{{lead.Time Zone}}" == "&#85;&#83;&#47;&#80;&#97;&#99;&#105;&#102;&#105;&#99;") {

tz = "10:00 AM - 10:45 AM PDT";

} else if ("{{lead.Time Zone}}" == "&#85;&#83;&#47;&#65;&#114;&#105;&#122;&#111;&#110;&#97;") {

tz = "10:00 AM - 10:45 AM MST";

} else if ("{{lead.Time Zone}}" == "&#85;&#83;&#47;&#67;&#101;&#110;&#116;&#114;&#97;&#108;") {

tz = "12:00 PM - 12:45 PM CDT";

} else if ("{{lead.Time Zone}}" == "&#85;&#83;&#47;&#77;&#111;&#117;&#110;&#116;&#97;&#105;&#110;") {

tz = "11:00 AM - 11:45 AM MDT";

} else if ("{{lead.Time Zone}}" == "&#67;&#97;&#110;&#97;&#100;&#97;&#47;&#83;&#97;&#115;&#107;&#97;&#116;&#99;&#104;&#101;&#119;&#97;&#110;") {

tz = "11:00 AM - 11:45 AM CST";

} else if ("{{lead.Time Zone}}" == "&#65;&#109;&#101;&#114;&#105;&#99;&#97;&#47;&#71;&#117;&#97;&#116;&#101;&#109;&#97;&#108;&#97;") {

tz = "11:00 AM - 11:45 AM CST";

} else if ("{{lead.Time Zone}}" == "&#65;&#109;&#101;&#114;&#105;&#99;&#97;&#47;&#66;&#111;&#103;&#111;&#116;&#97;") {

tz = "12:00 PM - 12:45 PM COT";

} else if ("{{lead.Time Zone}}" == "&#65;&#109;&#101;&#114;&#105;&#99;&#97;&#47;&#77;&#101;&#120;&#105;&#99;&#111;&#95;&#67;&#105;&#116;&#121;") {

tz = "12:00 PM - 12:45 PM CDT";

} else if ("{{lead.Time Zone}}" == "&#65;&#109;&#101;&#114;&#105;&#99;&#97;&#47;&#67;&#97;&#114;&#97;&#99;&#97;&#115;") {

tz = "12:30 PM - 1:15 PM VET";

} else if ("{{lead.Time Zone}}" == "&#85;&#83;&#47;&#69;&#97;&#115;&#116;&#101;&#114;&#110;") {

tz = "1:00 PM - 1:45 PM EDT";

} else if ("{{lead.Time Zone}}" == "&#65;&#109;&#101;&#114;&#105;&#99;&#97;&#47;&#83;&#97;&#110;&#116;&#105;&#97;&#103;&#111;") {

tz = "1:00 PM - 1:45 PM CLT";

} else if ("{{lead.Time Zone}}" == "&#65;&#109;&#101;&#114;&#105;&#99;&#97;&#47;&#76;&#97;&#95;&#80;&#97;&#122;") {

tz = "1:00 PM - 1:45 PM BOT";

} else if ("{{lead.Time Zone}}" == "&#66;&#114;&#97;&#122;&#105;&#108;&#47;&#69;&#97;&#115;&#116;") {

tz = "2:00 PM - 2:45 PM BRT";

} else if ("{{lead.Time Zone}}" == "&#65;&#109;&#101;&#114;&#105;&#99;&#97;&#47;&#72;&#97;&#108;&#105;&#102;&#97;&#120;") {

tz = "2:00 PM - 2:45 PM ADT";

} else if ("{{lead.Time Zone}}" == "&#65;&#109;&#101;&#114;&#105;&#99;&#97;&#47;&#66;&#117;&#101;&#110;&#111;&#115;&#95;&#65;&#105;&#114;&#101;&#115;") {

tz = "2:00 PM - 2:45 PM ART";

} else if ("{{lead.Time Zone}}" == "&#65;&#109;&#101;&#114;&#105;&#99;&#97;&#47;&#77;&#111;&#110;&#116;&#101;&#118;&#105;&#100;&#101;&#111;") {

tz = "2:00 PM - 2:45 PM UYT";

} else if ("{{lead.Time Zone}}" == "&#65;&#109;&#101;&#114;&#105;&#99;&#97;&#47;&#83;&#116;&#95;&#74;&#111;&#104;&#110;&#115;") {

tz = "2:30 PM - 3:15 PM NDT";

} else if ("{{lead.Time Zone}}" == "&#65;&#116;&#108;&#97;&#110;&#116;&#105;&#99;&#47;&#83;&#111;&#117;&#116;&#104;&#95;&#71;&#101;&#111;&#114;&#103;&#105;&#97;") {

tz = "3:00 PM - 3:45 PM GST";

} else if ("{{lead.Time Zone}}" == "&#65;&#109;&#101;&#114;&#105;&#99;&#97;&#47;&#71;&#111;&#100;&#116;&#104;&#97;&#98;") {

tz = "3:00 PM - 3:45 PM WGST";

} else if ("{{lead.Time Zone}}" == "&#65;&#116;&#108;&#97;&#110;&#116;&#105;&#99;&#47;&#67;&#97;&#112;&#101;&#95;&#86;&#101;&#114;&#100;&#101;") {

tz = "4:00 PM - 4:45 PM CVT";

} else if ("{{lead.Time Zone}}" == "&#71;&#114;&#101;&#101;&#110;&#119;&#105;&#99;&#104;") {

tz = "5:00 PM - 5:45 PM GMT";

} else if ("{{lead.Time Zone}}" == "&#65;&#116;&#108;&#97;&#110;&#116;&#105;&#99;&#47;&#65;&#122;&#111;&#114;&#101;&#115;") {

tz = "5:00 PM - 5:45 PM AZOST";

} else if ("{{lead.Time Zone}}" == "&#69;&#117;&#114;&#111;&#112;&#101;&#47;&#76;&#105;&#115;&#98;&#111;&#110;") {

tz = "6:00 PM - 6:45 PM WEST";

} else {

tz = "10:00 AM - 10:45 AM PDT";

}

document.getElementById("timeZone").innerHTML = tz;

}

</script>

[Kassia_Wilhelm · Accepted solution]

UPDATE: It appears that Marketo did some kind of update that made my previous solution no longer work. Now in order to get the Javascript to work I had to change the syntax from the encoded values back to the normal text values - so as follows:

     <script type="text/javascript">

     window.onload = function() {

     var tz = "10:00 AM - 10:45 AM PDT";

     if ("{{lead.Time Zone}}" == "Pacific/Tongatapu") {

     tz = "6:00 AM - 6:45 AM TOT";

     } else if ("{{lead.Time Zone}}" == "US/Samoa") {

     tz = "6:00 AM - 6:45 AM SST";

     } else if ("{{lead.Time Zone}}" == "US/Hawaii") {

     tz = "7:00 AM - 7:45 AM HAST";

     } else if ("{{lead.Time Zone}}" == "US/Aleutian") {

     tz = "8:00 AM - 8:45 AM HADT";

     } else if ("{{lead.Time Zone}}" == "US/Alaska") {

     tz = "9:00 AM - 9:45 AM AKDT";

     } else if ("{{lead.Time Zone}}" == "US/Pacific") {

     tz = "10:00 AM - 10:45 AM PDT";

     } else if ("{{lead.Time Zone}}" == "US/Arizona") {

     tz = "10:00 AM - 10:45 AM MST";

     } else if ("{{lead.Time Zone}}" == "US/Central") {

     tz = "12:00 PM - 12:45 PM CDT";

...

     } else {

     tz = "10:00 AM - 10:45 AM PDT";

     }

     document.getElementById("timeZone").innerHTML = tz;

     }

     </script>