Many of our clients run their website on WordPress’s CMS platform, as it allows them more flexibility with their content and how it is displayed. Integrating WordPress CMS with HubSpot’s CRM can prove highly fruitful for your business.
At Lynton, we’re experienced in the art of integrating HubSpot with WordPress. Here is a breakdown on how to utilize the best parts of HubSpot from within a WordPress website.
HubSpot API Prospect and Visitor Tracking
One of the most powerful reasons to use HubSpot is to gather insights about your customers. There is a significant number of tools to help you that allow you to truly customize the experience for the end user.
HubSpot goes deeper though, by letting you know the steps a visitor makes in the process of becoming a customer. Did they visit a product landing page before filling out a form? Did they visit multiple pages or just one? All of this information is invaluable in evaluating the performance of a website.
Ready to talk integrations? Schedule a free consultation.
Overview of Visitor Tracking
This is where the visitor tracking script comes into play. This script tracks visitors of your site in real time and syncs those responses into your HubSpot portal. This tool creates the foundation for any WordPress to HubSpot integration.
Adding the tracking code to your website is straightforward. You can add the code to your header.php file in your WordPress theme or use your favorite tag manager application, like Google Tag Manager, to install your HubSpot tracking code. you can install the official HubSpot WordPress plugin.
Adding the Tracking Code to the Header
There are multiple ways to add a tracking code to your WordPress theme’s header. The simplest would be to install a plugin like Insert Headers and Footers through the WordPress dashboard and use the fields provided. Savvy users may prefer editing their theme files (but be aware if you’re using a third-party theme - theme updates can wipe out changes, unless you’re using a child theme). If you want to do this, the best way is to locate your functions.php file (usually in /wp-content/themes/your-theme) and place the following function before the closing PHP tag (which looks like “?>”):
if (!function_exists('hubspot_add_tracking_code')) {
function hubspot_add_tracking_code() {
?>
<!-- Replace this with your own HubSpot embed code -->
<script type="text/javascript" id="hs-script-loader"
async defer src="//js.hs-scripts.com/xxxxx.js"></script>
<!-- End of HubSpot Embed Code -->
<?php
}
add_action('wp_head', 'hubspot_add_tracking_code');
}
However you’re placing the code, you’ll need to grab it from HubSpot first. To perform this task, log into your HubSpot portal and navigate to settings > reports > tracking code.
In the first section of this new page, you'll see "tracking code." In a box on this page, you'll see Javascript code, but all you need is the "copy to clipboard" button. Press that then paste it into the header.php file just above the wp_head(); call and you'll have successfully added HubSpot's visitor tracking functionality to your WordPress site.
Afterward, save and then use the Validate installation field back in the reports settings page to check to make sure HubSpot finds your code.
Adding the Tracking Code via Google Tag Manager
If you already have Google Tag Manager installed, simply follow HubSpot’s instructions to add the code within your existing container. Verify in your container version and publish.
Turning Users into HubSpot Contacts
Now that the tracking code is ready, you can use the HubSpot API to get information out of WordPress and into HubSpot. HubSpot has several APIs to manipulate and enhance your website. One such API is the HubSpot Forms API, which allows you to pass any information captured on your website to HubSpot. The endpoint doesn’t require authentication, so you can make calls from a form to the HubSpot API from the client without needing to worry about security.
Finding Your WordPress Meta Fields
By default, WordPress only collects the username and email of new users. However, many of the popular WordPress plugins, such as WooCommerce and BuddyPress, create their own registration forms that you may be using. Other plugins and themes may allow you to add custom fields, or you could follow the official tutorial on Customizing the Registration Form. By default, WordPress provides the following fields you might be interested in collecting:
-
user_login (their username)
-
user_url (their website)
-
user_email
-
display_name (the name that WordPress displays on the front end)
-
nickname
-
first_name
-
last_name
-
description
If you’re collecting any of those fields in your registration form, take note of the field name. And of course, plugins and themes may add other fields. Refer to your plugin/theme documentation to find out the name of any additional fields.
Creating a HubSpot Form to Post Conversions To
To post data to HubSpot and have it automatically generate or update contacts, you need to create a form to use with the WordPress registration hook. Log in to your portal and add a new form. Include the email field and any other fields you want to collect (taking note of the HubSpot internal property name, which you’ll see on the left panel’s heading) in the form and save. Once you've saved the form, you'll want to look at the URL for the page you are currently on.
As you can see from the image above, the GUID of the form is the series of numbers, letters, and dashes in the URL. Copy this down for use in a later step.
Modifying Functions.php with a New Hook
WordPress themes have a file called functions.php, which runs automatically and therefore is a good place to put custom functions (but the warning about third-party themes bears repeating here). Near the end of the file, before the closing php tag (which looks like “?>), you need to insert a few lines of code:
if (!function_exists('push_registration_to_hubspot')) {
function push_registration_to_hubspot($user_id) {
/* $hs_context stores analytics data about your visitor, including
their HubSpot cookie, their IP address, and the page the form was on.
If you have a custom registration page, you may want to replace the
pageUrl and pageName arguments. */
$hs_context = array(
'hutk' => $_COOKIE['hubspotutk'],
'ipAddress' => $_SERVER['REMOTE_ADDR'],
'pageUrl' => site_url('/wp-login.php?action=register'),
'pageName' => 'WordPress User Registration'
);
/* The key on the left here will contain the HubSpot property name,
while the part on the right will pull the meta field from their
WordPress profile.
If you have more fields, this is where you'd add them. */
$fields = array(
'firstname' => get_user_meta($user_id, 'first_name', true),
'lastname' => get_user_meta($user_id, 'last_name', true),
'email' => get_userdata($user_id)->user_email,
'hs_context' => json_encode($hs_context)
);
/* This is the URL we'll be submitting to. Replace "YourPortalID"
and "YourFormGUID" with the appropriate values from the previous
step. */
$endpoint = "https://forms.hubspot.com/uploads/form/v2/YourPortalID/YourFormGUID";
$data = wp_remote_post($endpoint, array(
'headers' => array(
'Content-Type' => 'application/x-www-form-urlencoded'
),
'body' => $fields
));
}
add_action('user_register', 'push_registration_to_hubspot', 10, 1);
}
Final Thoughts
That's it! You should now be able to test your registration form and see the data populating in HubSpot. If the code block above looks like a different language to you, don't fret. This code is pretty much pulled straight out of the HubSpot API example for the Forms API. It was modified slightly to be easier to read and to match our needs as a WordPress Hook action.
Seems complicated, but at Lynton this is second nature to us. We have a whole library of tools we've already created to make this type of integration much easier to implement. For help marrying your WordPress website to your HubSpot portal, contact us today.
You May Also Like
