Adding personalisation from a URL query to a landing page

[Quantum-AU]

Hello!

I have zero coding experience and mostly just feel my way around the HS templates and HUBL. 😀

I have run into a problem where I am sending a sales email (Not a marketing email) to a cold prospect who I have entered into Hubspot. I want to send them to a personalised landing page that shows their first name and company name using the standard personalisation tokens. 

This obviously works if the contact has already filled out a form or if we send a "marketing" email (Hubspot automatically associates the cookie with the browser with a marketing email even if they haven't filled a form out) 

So I was directed to use a custom URL query and add a javascript module to the template but I can't seem to get it to register the page.

My URL query looks like "landingpage.mydomain.com.au/test-page?firstname=Billy&name=Google"

the Javascript is:

function getQueryStrings() { 
  var assoc  = {};
  var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
  var queryString = location.search.substring(1); 
  var keyValues = queryString.split('&'); 

  for(var i in keyValues) { 
    var key = keyValues[i].split('=');
    if (key.length > 1) {
      assoc[decode(key[0])] = decode(key[1]);
    }
  } 

  return assoc; 
} 

var personalization_token = getQueryStrings();
var firstname = personalization_token("contact.firstname", "there");
var name = personalization_token("company.name", "your company"); 

Can someone please help me to get this right?

Cheers - Charles

[Rbanga · Accepted solution]

Was working with Charles on this via chat (ticket number #3157889) we resolved this query by using HubL variables instead of Javascript. 

We used the HubL HTTP request variable (https://designers.hubspot.com/docs/hubl/hubl-supported-variables#http-request-variables) - {{ request.query_dict }} to pull the query parameter from the URL and render it on the page. 

To set a fall-back option in case the contact visisted a page without the query parameter, we used the If statement function (https://designers.hubspot.com/docs/hubl/if-statements). We used the contact token for 'contact.firstname' and company token 'name' with the default option as 'there' - to render as a fallback. 

The final code that we added to the rich text source code was: 

{% if request.query_dict.firstname %}
<h1>Hi {{ request.query_dict.firstname }}, I would love to see if we can help out at {{ request.query_dict.name }}!</h1>
{% else %}
<h1>Hi {{ personalization_token("contact.firstname", "there") }}, I would love to see if we can help out at {{ personalization_token("company.name", "your company") }}!</h1>
{% endif %}

[Quantum-AU]

Thanks @Rbanga !

It is working perfectly - appreciate your help!

Cheers - Charles