Welcome back to the HubSpot API Series. In this article we are going to take a break from learning the foundation of the HubSpot API and focus on how we can implement it in the real world. If you haven't read my previous posts in this series, I would highly recommend that you go back and start there. Our focus today is going to be on how to utilize the best parts of HubSpot from within a WordPress website.
Many of our clients choose to run their website on the WordPress CMS platform, as it allows them more flexibility with their content and how it is displayed. At LyntonWeb we have become very experienced in the art of integrating HubSpot with WordPress.
HubSpot API Prospect and Visitor Tracking
One of the most powerful reasons to use HubSpot is to get insights about your customers. There are great number of tools to help you do that, which allow you to truly customize the experience for the end user.
HubSpot takes it one step further, though, by letting you know the steps a visitor has taken in the process of becoming a customer. Did they visit a product landing page prior to filling out a form for more information? Did they visit multiple pages or were they sold on the first page they touched? All of this information can become invaluable in evaluating the performance of a website. It is because of the depth and richness of the information provided by HubSpot that many companies choose to host their site entirely in HubSpot.
That is where the Visitor Tracking script comes into play. HubSpot has developed a script that keeps track of visitors to your site in real time and reports those responses into your HubSpot portal. It is with this tool that the foundation for any WordPress to HubSpot integration is built. Adding the tracking code your website is really straightforward. You can add the code to your header.php file in your WordPress theme or you can install the official HubSpot WordPress plugin.
Adding the Tracking Code to the Header
This is the method that I prefer, simply because it doesn't bloat the WordPress install with plugins. First you will need to locate the header.php file for your theme, which is usually located in /wp-content/themes/your-theme/. Once you've located your header.php file you'll want to open it in your favorite code editor. Inside the header.php file you'll see a lot of code that looks something like this:
You'll notice that in the screenshot above (which is the default WordPress theme's header.php file) I have highlighted a line of code that says <?php wp_head(); ?>. This line tells WordPress that this is the end of the header. We want to include our HubSpot tracking script before this line of code so that WordPress knows that we are including it in the head. So go ahead and log into your HubSpot portal and navigate to reports -> reports settings.
Go ahead and save and then use the Validate installation field back in the reports settings page to check to make sure your code is found by HubSpot!
Adding the Tracking Code via the Plugin
All you need to do to install the tracking code via plugin is to log in to the WordPress website administrator panel and navigate to plugins -> add new. In the search box type HubSpot, and it'll be the first plugin that shows up on the list, the one called "HubSpot for WordPress." Look at the description of the plugin and look for the "by HubSpot" tag line to know that you are getting the official plugin.
Go ahead and install this plugin and activate it, and once you do you'll notice a new button on the left side of your dashboard titled "HubSpot" with the HubSpot logo to the left. This is the HubSpot settings menu, so go ahead and navigate to HubSpot -> Settings to finish the set up process.
On the settings screen of the HubSpot plugin simply type the portal id for your HubSpot portal and then click "click here to authenticate" in order to log in to your portal and allow the plugin to access the necessary information. Once you've authenticated you're completely setup and you can use the validation tool in reports -> report settings to make sure HubSpot is finding the new code.
Convert Registered Users into HubSpot Customers
Now that you've got your tracking code lets use the API to get some information out of WordPress and into HubSpot! If this is your first time writing code for WordPress then you'll quickly fall in love with the various APIs that it has to offer for manipulating and enhancing your website. One such API is also known as "hooks and filters" or the WordPress events API. Hooks allow you to literally hook into a process that WordPress performs and usually allow you to access data associated with that process. One of the processes that WordPress allows us to hook into is the "user_register" process.
As we already discussed HubSpot allows you to track your visitors as they look at your website and eventually convert on it. HubSpot, however, doesn't have any membership type functionality where users can register as a user on your site. WordPress has this functionality built in but out of the box, even with the HubSpot plugin installed, it's not going to recognize that these individuals have converted as customers. So let's work on taking care of that!
WordPress Only Requires Email and Password
We have a bit of a problem we have to overcome. By default WordPress only asks for a username and email and then a password is emailed to the user. This is one of the first things I change with my WordPress websites so that I can collect better user data. I use a plugin called Register Plus Redux for modifying the form, although if you're a purist at heart you can modify the registration form using the WordPress Events API as well. I won't go into too much detail about how to set up Register Plus Redux, but there are plenty of resources out there for it and it's pretty self explanatory once you've installed it and looked at the settings page!
Once you have Register Plus Redux setup you'll be able to collect the first name and last name fields we need.
Creating a HubSpot Form to Post Conversions To
In order for us to post data to HubSpot and have it automatically create or update contacts, we need to create a form that we are going to use with the WordPress registration hook. Go ahead and go into your portal and add a new form. Include only the first name, last name and email fields in the form and save the form. 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 is a file that is called when WordPress is instantiated. It is because of this that we put all of our hook registrations in the functions.php file (unless you want to build your own plugin, or if you are including external libraries in your functions.php file). This is where the magic starts to happen! Near the end of the file, before the closing .php tag, we are going to insert a few lines of code.
add_action('user_register', 'convert_to_hubspot', 10, 1);
Analyzing the above code we see we are making a call to the "add_action" function, which is part of the WordPress Events API, and we are passing in 4 parameters. The first parameter is the name of the action we are hooking into, in this case the user_register action. The second parameter is the name of a function that we want to call when the event is triggered. Our function will be called "convert_to_hubspot" and we'll be building it in the next step. The third parameter is the priority number which indicates which order multiple actions registered to the same hook should occur in, with higher numbers being triggered last. The last parameter is the number of parameters we expect to be passed to our function when the hook occurs.
Now lets build out the convert_to_hubspot function:
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 like a lot of mumbo jumbo, but at LyntonWeb this kind of code is second nature to us. In fact we have a whole library of tools we've already created to make this type of integration much easier to implement.
If you really want your WordPress website to be fully married to your HubSpot portal, give us a shout!