Change landing page based on time zone with Javascript | Community
Skip to main content
Kassia_Wilhelm
Kassia_Wilhelm
New Participant
September 2, 2014
Solved

Change landing page based on time zone with Javascript

  • September 2, 2014
  • 5 replies
  • 3616 views
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>
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Kassia_Wilhelm

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>

5 replies

Kassia_Wilhelm
Kassia_WilhelmAuthor
New Participant
September 5, 2014
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
Kassia_WilhelmAuthorAccepted solution
New Participant
November 3, 2015

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>

Kassia_Wilhelm
Kassia_WilhelmAuthor
New Participant
September 2, 2014
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!
A
Anonymous
September 2, 2014
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
Kassia_WilhelmAuthor
New Participant
September 2, 2014
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?
Grant_Booth
Grant_Booth
New Participant
September 2, 2014
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}}
Terms & ConditionsAccessibility statement

Loading footer...