Guide to updating user attributes via UE.page Hit
Learn how to use one of the most useful ways to update attributes in Single Page Applications
Introduction to updating attributes
There are many ways to update user attributes. You can do this simply by setting up Automation via Event Trigger, creating a tag in Google Tag Manager or by implementing code on your website.
In this article, I will show you how to do this using a JavaScript UE.pageHit command. It is useful when you want to "eliminate the middleman" and do things directly via code on your Single Page Application.
What is this pageHit command?
Hit command is a retrieval of an item (page, video) from the server. Command pageHit sends information to User.com as if an user navigated to a new page in standard HTTP installations.
With UE.pageHit() you can overwrite attributes in User.com. Just add an attribute and desired value after this command as in the example below. Remember to use proper formatting!
Step-by-step guide
You can test out this code using the code console. Make sure you have User.com correctly implemented first!
UE.pageHit({name: "Uncle Ben"});
Then check if selected attribute - in this case, "name" was sent to User.com.
Looks OK? Let’s try a more challenging task. Let’s say our page is Single Page Application, and we have a “Subscribe to newsletter” form we’d like to scan and send input value as "email" attribute to User.com.
First, we have to add the trigger. Let's use "submit" listener and create a variable, for the whole thing to work properly.
<script>var form = document.querySelector
("selector for submit event");form.addEventListener('submit', function (e) {
Second, we have to "scan" for a chosen attribute; we have to define the variable we will later use to send data.
<script> var email_subscribe = document.querySelector
(“here we put CSS selector for input field”).value</script>
Next we have to update attributes using pageHit.
<script> UE.pageHit({email: email_subscribe}); </script>
We can create an event so we will register which attributes were updated and with what values.
The whole code should look like this:
<script>
var form = document.querySelector
("selector for submit function event");
form.addEventListener('submit', function (e) {
var email_sub = form.querySelector
("here we put CSS selector for input field").value;
UE.pageHit{email: email_sub};
});
</script>
It will create a page view as well as upgrade client attributes.
Need more help? You can see how to do this in this video.
What if I don't want to create page view on my site?
You can use the User.com ('client.update', {attribute: 'value'}); method as well. However, it won't create a pageHit if your page is not a Single Page Application. Furthermore, running this function would also refresh your page.
userengage('client.update', {attribute: 'value'});
Exceptions to the attribute update:
Keep in mind that using those methods won't enable you to update all attributes. Here’s the list of ones you cannot change:
- Page views (integer)
- First seen (date & time)
- Last seen (date & time)
- Date created (date & time)
- Date updated (date & time)
- Key (string)
- Email mx valid (boolean)
- Web push notification (boolean)
- Country (string)
- Region (string)
- City (string)
- URL (string)
- IP address (string)
- Referrer (string)
- Timezone (string)
- Device (fixed choices; 1 - mobile, 2 - desktop, 3 - tablet)
- Browser (string)
- Browser language (string)
- Browser version (string)
- Os type (string)
- Hostname (string)
- Screen resolution (string)
Note: On all user attributes, you are allowed to send empty values, in which case the attribute's value is set to empty. There is one exception, and it is user_id, which we do not allow to be set to empty. We use user_id as an identifier, and you could, by one rather minor mistake, break down your database which would be extra troublesome to fix.
All in all, when it comes to using user_id in our JavaScript integrations, you can set it or change it to other value, but you cannot remove the value - if you want to create another user (accordingly to this instruction) you need to use UE.resetAuth(data). If you, however, try to set it to an empty value, the result will be a 400 error.