Advanced User Attribute Setup: Displaying a Custom Survey to Customers Based On Attributes (WordPress/WooCommerce)

The Example: An integration of sending Wordpress User Attributes (the date they created an account in your store) to Hotjar and then targeting those users with a custom Hotjar Survey.

The Situation: We’ve just revamped our “Create an account” form on our eCommerce store, using Wordpress + WooCommerce, and we’re looking to gain some valuable user insights about whether or not the new form is easy to understand.

What better way to see if our process is working than by asking those users directly? This is how we did it!

Sending User Attributes to Hotjar

We started by going to the "Theme Editor" which can be found in your Wordpress Dashboard when logged in as an admin. It is located under the “Appearance” Tab on the left-hand side menu.

In the page that came up, we made sure that our active theme was selected in the dropdown. We then clicked on the “Theme Footer (footer.php)” item in the list.

After heading over to Hotjar to enable User Attributes, we made changes with the “footer.php” file available to edit. There a PHP function right at the beginning of this file was added, right after the opening PHP tag:

For maximum context, the function we added is based on the Identify API code required to start using User Attributes. Our developers then created the rest which wound up looking like:

<?php
function get_signup_date_hj() {
    $current_user = wp_get_current_user(); // Retrieve the user from Wordpress
	$current_user_id = $current_user->ID;
	if (0 != $current_user_id){
		$registered = get_userdata($current_user_id)->user_registered; // Get the userdata->registration_time
		$epochTime = strtotime($registered); //convert the time registered to UNIX epoch
		return $epochTime; //return the time of registration as UNIX epoch value
	}else{
		return "null"; // not a registered user
    }
}

Our next step was to scroll all the way down until we found the “wp_footer()” tag. Right before that tag, we added our second script.

It’s important to note that this second code is actually JavaScript that we added in HTML. That’s why it’s enclosed within “script” tags. This script sends our value to Hotjar so that we can later use it to target a subset of our customers.

Here's the JavaScript we added:

<script>
	let signedUpEpoch = ; //Pull the epochTime from our PHP script 
	var isoDate = new Date(signedUpEpoch).toISOString();
	var userId =  null; // Replace your_user_id with your own if available.
	if (signedUpEpoch != null){ //validate the user is logged in
		window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)}; //make sure we can reach out window.hj attribute
		window.hj('identify', userId, {
			'Signed_up_date': isoDate, // Signup date in ISO-8601 format.
		});
	}
</script>

Once we can confirm there are no typos in the code, we click the “Update File” button.

Hotjar now knows the exact time visitors signed up to this.

Setting up your Survey in your Hotjar Dashboard

Since we updated our sign-up process, we wanted to create our Survey to only ask feedback from users who signed up in the last 7 days.

To get started, we created a new Survey. On Step 2 of the Survey setup, we selected Location: On-site.

On Step 5, we selected “Users with specific attributes”. Next, we clicked on “Add attribute” and selected the “Signed_up_date” attribute.

From there, we picked “less than” as the condition and entered 7 days ago for the date.

The On-site Survey creation was completed by adding Survey questions regarding our Sign-up process offering our users to give details if something went wrong.

Once the On-site Survey was set to live, it only appeared to Users that signed up less than 7 days ago.

You can see how this scenario can be highly powerful by allowing you to get insights directly from your user at a specific step in their journey on your site.