There are a number of situations where you might want to adapt the content of a website or article based on the reader, and what relationship you may have with them. The article you are reading now is one example of that, and the basis for the solution I will show you. The same logic can also be used to present different modules on your product pages to existing customers, or to skip the form page on gated content for people who already provided the requested information.
I am not talking about individual personalization here, but rather about efficient segmentation that can present the most relevant content based on what you know about your viewer.
NB: This article is directed at readers with at least some experience working with HubL or basic frontend development.
Case: Full articles should be available to subscribers of our newsletter.
For this example, I will show the solution we have used on the articles in this newsletter.
Our newsletter is primarily intended to be available to our subscribers, who receive an email with new content a couple of times each month. When they click into our website they should see the entire article, without being prompted to subscribe again.
For everyone else, we want to give some visibility into the kind of content you can expect if you become a subscriber, but you won't see the main take aways.
Subscribers can try to open this article in "incognito mode" to see what it looks like to others.
How to implement this into your template
In order to make this happen, we have made some adaptions to the article template for this blog in HubSpot.
In our blog_post template, we are using a subscriber variable to show or hide information that should be presented to subscribers or others. The entire article content here is wrapped in this statement to only be presented if subscriber is true
Subscriber variable
Before implementing the blocks in our template that show or hide information from the reader, we need to define how we want to segment the information. In our example, we want to know if the reader is a subscriber of our newsletter already.
We set this to a variable called subscriber, so we won't have to write or update this filter in more than one place.
{% set subscriber = true %}
{% else %}
{% set subscriber = false %}
{% endif %}
There are many ways to use CRM data in a template, but we have chosen to use a list because it makes it easier to consolidate a number of different filters, and it is a lot easier for anyone to edit the list criteria without updating the code in our template.
Copy the code above and replace [listId] with the ID of a list in your CRM.
Make sure you always consider how your filter would affect a new user, as this would also apply to any of your contacts if they use a new device or can't be identified.
Template blocks
When we have set a variable to check if the user in in our list or not, we can wrap our content in a statement like this to present one thing to subscribers, and something else to everyone else. We could of course have more branches for several segments if we want to, but that is not necessary here.
<div class="post-body">
{{ content.post_body }}
</div>
{% else %}
<div class="post-body">
{{ content.post_body|truncatehtml(1200, '...', false) }}
</div>
{% endif %}
In addition to this, you can also use the same wrapping logic to show or hide something specific. At the end of this article we have a subscription form that we want to ONLY show to readers if they are NOT in our subscriber list. We achieve that by reversing the statement, and coding a block like this:
<div class="subscribe-form">
{% form "subscribe_form" form_to_use="[YourFormId]" %}
</div>
{% endif %}
By adding the exclamation point we essentially reverse the statement and show this block only if the subscriber variable is false.
As mentioned above about new users, this will of course always be shown to new users, and may also be shown to our subscribers if they deleted their cookies, or visited your website from a new browser.
Controlling the editing experience
Segmented content like this can become a pain for your content creators when they are working on the page in HubSpot. In the content editor, the statement above will always determine the writer as a non-subscriber, and hide some of the content so they can't work on it. This is important to consider when you create the template, and there are some very easy tools from HubSpot that will solve this for us.
In our case, the editor of an article does not actually need to see both versions, only the full article version. Therefore, it is enough for us to make sure the subscriber variable is true for anyone working in the editor, or when we are previewing a page before publishing it.
We achieve this by making this simple adjustment to the first statement, to check if the reader is member of our list OR viewing from a content editor OR viewing a preview of the page.
{% set subscriber = true %}
{% else %}
{% set subscriber = false %}
{% endif %}
This way, HubSpot will always show the subscriber version in these situations.
Security disclaimer
It is important to note that this is an effective way to segment relevant information to the right users, but it is NOT a secure way to restrict sensitive or confidential information. If your information is not safe to be shared widely, you should always secure it properly with professional authentication measures.
HubSpot does support login to their customer portal feature if you have that in your license, but that method is not discussed here.
