Managing Frontend Layer of website with User.com
Learn how User.com let's you influence how your website looks and behaves
User.com application allows for the dynamic customisation of website elements based on the visitor's data. This can be achieved using data assigned to their record in the Data -> People section (attributes, events) or in relation to the visitor's actions on the site (e.g., visiting a specific URL).
Implementation Methods
There are two possible paths to implement dynamic content management on a website.
First one enables setting up a scenario entirely on User.com's side, while the second allows for sending information from User.com to the website.
Logic on the User.com Side:
Connection is achieved by setting up automation using the "HTML block" or "Send code" modules, which directly affect the content of the page.
HTML Block Module
Allows for inserting/replacing a piece of code in a <div> element of a given class.
Advantages:
Simple code replacement definition (we define the HTML to be inserted in place of the existing one)
Ready-made statistics of displays and clicks
Limitations:
Works only for <div> elements and <class>
Upon activation, it operates for all <div> elements of a given class (e.g., if the page has 5 elements with div.user-block; the content will be replaced in all at the same time, with the same content)
Upon activation, it works for all tabs where the user.com widget is loaded for a given cookie (e.g., if I want to display a block in DIV.user-block on URL="https://example.com"; I have the tab "https://example.com/test" open; I open another tab "https://example.com"; automation activates according to the specified condition; HTML block activates on both tabs and replaces the content in DIV.user-block)
Send Code Module
It has a broader application - it allows for triggering script on website. This enables dynamic input or replacement of any selector's content on the site, considering additional conditions in the script - including using snippet tags or advanced JavaScript functions.
Advantages:
Ability to bypass all limitations associated with HTML block
Full configurability
Limitations:
More complicated content definition (Javascript that builds HTML)
Need to add separate scripts for tracking clicks, displays, etc.
Example of code generating a banner with analytical events in the "Send Code" module:
if (window && window.location && window.location.href) { var url = window.location.href var bannerSelector = '#usercom-banner' var productUrl = 'https://strona.pl/sklep/narzedzia-akcesoria/jednoreczne' var bannerUrl_min = 'https://media.user.com/uploads/8zcxgy-pl/lowe-baner-allegro-932x125-jednoreczne-02_3CYpX7a.svg' var bannerUrl_768 = 'https://media.user.com/uploads/8zcxgy-pl/lowe-baner-allegro-932x125-jednoreczne-02_3CYpX7a.svg' var bannerUrl_1024 = 'https://media.user.com/uploads/8zcxgy-pl/lowe-baner-allegro-932x125-jednoreczne-02_3CYpX7a.svg' var link_redirect = 'https://strona.pl/marki/lowe' var action_name = 'baner xxx' if (url.includes(productUrl)) { window.user_banner_click = function() { dataLayer.push({ 'event': 'user_baner', 'label': action_name, 'action': 'klik' }); } window.user_banner_view = function() { dataLayer.push({ 'event': 'user_baner', 'label': action_name, 'action': 'odsłona' }); } var addImageToElement = function() { let banner_div = document.createElement('div'); banner_div.style.display = 'flex'; banner_div.style.justifyContent = 'center'; banner_div.style.alignItems = 'center'; banner_div.style.width = '100%'; let banner_link = document.createElement('a'); banner_link.setAttribute('href', link_redirect); banner_link.setAttribute('onclick', 'user_banner_click()'); banner_link.style.width = '100%'; let banner_div2 = document.createElement('div'); let picture = document.createElement('picture'); picture.style.maxWidth = '100%'; picture.style.width = '100%'; let banner_img1 = new Image(); banner_img1.setAttribute('src', bannerUrl_min); banner_img1.style.width = '100%'; banner_img1.style.height = 'auto'; let banner_img2 = document.createElement('source'); banner_img2.setAttribute('srcset', bannerUrl_1024); banner_img2.setAttribute('media', '(min-width: 1024px)'); banner_img2.style.width = '100%'; banner_img2.style.height = 'auto'; let banner_img3 = document.createElement('source'); banner_img3.setAttribute('srcset', bannerUrl_768); banner_img3.setAttribute('media', '(min-width: 768px)'); banner_img3.style.width = '100%'; banner_img3.style.height = 'auto'; banner_div.appendChild(banner_link); banner_link.appendChild(banner_div2); banner_div2.appendChild(picture); picture.appendChild(banner_img2); picture.appendChild(banner_img3); picture.appendChild(banner_img1); var bannerPlaceholder = document.querySelector(bannerSelector) if (bannerPlaceholder) { if (!bannerPlaceholder.children[0]) { bannerPlaceholder.appendChild(banner_div); user_banner_view() } } } addImageToElement(); }}">Logic on the Website Side:
By sending the visitor's data from User.com to the website's DataLayer or DOM, through the "Send code" block in automation. In this case, setting up the logic for dynamic content occurs outside the User.com application.
Send Code Module allows for triggering a script on website and sending user attributes in it.
Example:
For every user who visits the site, trigger the "user_properties" event along with their characteristics, e.g.:
<img src="https://app.userengage.com/media/uploads/638/f4d00-0-0.png"
onload="var CustomEvent = new CustomEvent('user_properties', { detail: { 'type': '', 'segment': '' } });document.dispatchEvent(CustomEvent);">Advantages:
Ability to reach out with personalized communication to the site visitor. Based on the data collected about the user - such as assigned attributes or registered events - we can display relevant content to achieve the intended effect.
Ability to insert content related to time-bound actions - e.g., promotions. The person responsible for automation can easily define the time frame in which a given scenario should be active. This does not require direct intervention in the site code. In the case of choosing path 1 (logic on the User.com side), the entire process occurs exclusively through the User.com application.
Ability to enrich it with data from User.com allows for the use of information about the visitor from multiple channels.
Limitations:
Managing website content from the level of automation created in User.com works excellently assuming that we are inserting/replacing specific code fragments, for a specific group (segment) of users, or on a specific URL of the site.
The solution will not work for inserting content that would be displayed globally, every time, for every visitor. In such a case, too frequent activation of automation could cause the queued actions to be executed. As a result, the code or script would not execute at the moment of the visitor's entry to the site. We must either use scenarios that are triggered "not more often than…" or those limited to very specific conditions (URL).
If automation specifies a group of users for whom the action should be executed, we should first create a segment defining the group and then use the "Segment" module (see - Example 1.), instead of the "Filters" module in our automation.
Conditions of the "Filters" module take longer to execute, so we should not use it in this type of automation.