Storing Session Variable

[rohansdeeson]

Hi is it possible to store a session variable in hubspot, I want to be able to store an item that a user clicked on to recall that at a later stage. 

Is this possible? if so can someone advise how it can be achieved

[piersg]

Hi @rohansdeeson (thanks @natsumimori)

You can use the Events JS API for this https://legacydocs.hubspot.com/docs/methods/tracking_code_api/javascript_events_api e.g.

document.getElementById("buyNow").onclick = function() {
    _hsq.push(["trackEvent", {
        id: "Clicked Buy Now button",
        value: 20.5
    }]);
};

Edit: not sure if you can associate it with a contact in HS. If you create a contact property to upate, you can pair the above with updating that contact property in the same onclick function using the Contacts API https://legacydocs.hubspot.com/docs/methods/contacts/update_contact. Alternatively you can add it as a note to a contact using the Engagements API.

[vesse]

@piersg would this information be present somewhere when rendering HubL when the same user (but not contact)  re-enters the site?

We have a specific need where we use a blog with tags, and the user can select a tag of their interest. If the selection has been made we'd like to add an UI element that points to oursite.com/theblog/tag/selectedtag and also include the tag when showing another module that shows recent posts from the blog.

The first one can be done with combination of LocalStorage and JavaScript, but for the second need we'd need to build a separate endpoint for getting the blog posts if the information is not available when rendering module HubL.

[piersg]

Hmm not sure you need JS to do that to be honest, but I'm also not clear on what you're trying to do.

You can get blog tags like this:

{% set my_tags = blog_tags(group.id, 250) %}
{% for item in my_tags %}
  slug = {{ blog_tag_url(group.id, item.slug) }}
  name = {{ item }}
{% endfor %}

So you could check if the URL is equal to a tag slug and display different elements based on that

{% set my_tags = blog_tags(group.id, 250) %}
{% for item in my_tags %}
  {% if request.path is string_containing blog_tag_url(group.id, item.slug) %}
    // Element
  {% endif %}
{% endfor %}

You can get recent blog posts within a topic like so:

{% set tag_posts = blog_recent_tag_posts('default','[TAG NAME]', 3) %}
{% for tag_post in tag_posts %}
    <div class="post-title">{{ tag_post.name }}</div>
{% endfor %}

Combining the above two:

{% set my_tags = blog_tags(group.id, 250) %}
{% for item in my_tags %}
  {% if request.path is string_containing blog_tag_url(group.id, item.slug) %}
    {% set tagName = blog_tag_url(group.id, item.slug) %}
    {% set tag_posts = blog_recent_tag_posts('default', tagName, 3) %}
    {% for tag_post in tag_posts %}
      <div class="post-title">{{ tag_post.name }}</div>
    {% endfor %}
  {% endif %}
{% endfor %}

You can check the blog HubL functions here.

To answer your question about visitor vs contact, the Hubspot cookie for a visitor is hubspotutk, so you could check to see if that's the same? However, I don't think it's necessary for doing what (I think) you're trying to do with blog tags.

[vesse]

Hi @piersg,

Yes I'm well aware of the HubL functions that exist. In the first case I'd need to render a link pointing to the tag the user has selected when they previously visited the site and made the selection

{% if user.selected_tag %}
  <a href="{{ blog_tag_url(blog_id, user.selected_tag %}">Your selection</a>
{% endif %}

for which I'd obviously need the tag. Same goes for the other module where I'd need this

{% set posts = blog_recent_tag_posts('default', ['default1', 'default2', user.selected_tag], 10) %}

<section>
  <h1>Recent posts of selected topics</h1>
  {% for post in posts %}
    <div>{# render things about the posts here #}</div>
  {% endfor %}
</section>

where again the tag is needed.

Consider like when you visit the website of a grocery store chain and you need to select your favorite as you are not interested in the offering of a establishment on the other side of the country. For this, from the list of all stores, you'd click the button saying "Set as my store", and then the next time you come to the site they know you chose a favorite and can then show you the offering of that store regardless of the URL you ended to the site with. ie. pretty basic things that one could do with sessions store (basically when you as a developer are also in control of th backend implementation)

Edit: Hmm indeed cookies could work for this too - they`re available in {{ request.cookies }} on the server side

[piersg]

@vesse Yeah, turns out {{request.cookies}} does retrieve cookies you've set yourself via JS, so you could set the tag using the code I wrote in my above comment, then retrieve using that HubL variable.

e.g. if you set the name of the cookie as "selected_tag" you can do {{request.cookies.selected_tag }} to get the value.

@rohansdeeson could also be useful for you

[vesse]

Hi @piersg,

Query strings won't work either because you will lose them at some point when going to other sites, but the cookie does actually solve it. You can set other than session cookies from JavaScript too, eg. this is valid for a year and can be seen serverside from request.cookies:

document.cookie = "kissa=kaunis;max-age=31536000;secure;samesite=lax;path=/";

the only thing that cannot be set is httpOnly, but I don't see a problem here with other security measures like CSP, and due to the fact that we use it only for a minor rendering detail.

Thanks, it was your comment that lead me to this. Rarely have had a need to use cookies in the frontend 🙂

[natsumimori]

Hi @vesse ,

Would you mind marking one (or more) response(s) here as "solution" so that other Community members can also refer to it? Thank you!

[rohansdeeson]

Im just testing both options now so will be accepting one today

[vesse]

Hi @natsumimori ,

It wasn't my question, not sure if I can do that. At least I don't see an option how to do that.

[natsumimori]

oops my bad, it was from @rohansdeeson .

Thanks @vesse for pointing me out!

[piersg]

@vesse Yeah I saw your edit about request.cookies and changed my post accordingly. Glad to be of help 👍

[rohansdeeson]

So in the flow I am planning the following will happen

User Clicks an Item on Page A

This sends them to Page B Which loads a hubspot meeting booking Calendar

When they have booked a slot on calendar it redirects them to Page C

Page C recalls the information about what they clicked on Page A

[piersg · Accepted solution]

@rohansdeeson Ok, something like this might work for that flow:

// on Page A create cookie and set value on click of item
document.getElementById("myBtn").onclick = function() {
  // not sure what value you want to use, change textContent (which gets the text) to whatever attribute you need
  var val = this.textContent;
  document.cookie = "myNewCookie="+val;
};

// on Page C retrieve value of your cookie
var cookieValue = document.cookie
  .split('; ')
  .find(row => row.startsWith('myNewCookie'))
  .split('=')[1];

console.log(cookieValue);

[natsumimori]

Hi @rohansdeeson ,

Thank you for reaching out to the HubSpot Community.

I will tag in some subject matter experts here: @piersg and @Jake_Lett , could you share your knowledge for @rohansdeeson ?