Sending Data to HubSpot
This article will go over how to set up Hubspot tracking snippets in your Skilljar theme. This is following the standard practices outlined in this documentation - https://developers.hubspot.com/docs/reference/api/analytics-and-events/tracking-code#tracking-code-api-overview
Please note that the Custom Events feature within Hubspot requires an Enterprise level subscription to access.
Create Custom Events Within Hubspot
In order to send data to Hubspot from Skilljar, you will first need to create custom events that can map to actions taken within Skilljar.
You will want to decide based on your use case what those custom events will be. We will walk through 2 options below. First, you can create generic Course Enrollment and Course Completion events that take in the course ID and title as well as information on the user. Or you can create Course Enrollment and Course Completion events specific to courses you have published that you would like to track.
Please follow this Hubspot documentation to create custom events via the Hubspot UI - https://knowledge.hubspot.com/reports/create-custom-behavioral-events-with-the-code-wizard#create-events-with-a-javascript-code-snippet
Initialize Hubspot Tracking in Skilljar
Below is the snippet you will want to add to the Analytics Tracking Snippet Section of your theme. This initializes Hubspot tracking and allows us to use Hubspot javascript functions to push data to your Hubspot instance.
You will need to replace the {hubId} with the ID of your Hubspot organization [a number like 12345678].
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/{hubId}.js">
</script>
<!-- End of HubSpot Embed Code -->
Identify a Skilljar User Within Hubspot
In this section we will call the identify Hubspot function that sends user data to Hubspot and associates the future events with that user.
Please place the below snippet at the top of the Global Code Snippet section of your theme.
<!-- Start hubspot send user-->
<script>
if (typeof skilljarUser !== 'undefined') {
var _hsq = _hsq || [];
_hsq.push(['identify',{
email: skilljarUser.email,
firstname: skilljarUser.firstName,
lastname: skilljarUser.lastName
}]);
_hsq.push(['trackPageView']);
}
</script>
<!-- End hubspot send user-->
This function will pass the Skilljar student's email, first name, and last name to Hubspot.
More in depth information about this function can be found in the following Hubspot documentation - https://developers.hubspot.com/docs/reference/api/analytics-and-events/tracking-code#identify-a-visitor
Identifying a visitor in Hubspot will also link them to a contact. Information on that can be found here - https://developers.hubspot.com/docs/reference/api/analytics-and-events/tracking-code#identifying-contacts
Sending Custom Events to Hubspot
Option 1: Generic Enrollment and Completion Events
When you create the custom enrollment and completion events in Hubspot, they will provide a name value that Hubspot uses to track instances of that event.
To track Course Enrollment please place the following snippet in the Course Conversion Snippet section of your theme.
<!-- Start hubspot send enrollment-->
<script>
var _hsq = window._hsq = window._hsq || [];
if (skilljarCourse !== 'undefined') {
window._hsq.push([
'trackCustomBehavioralEvent',
{
name: 'enrollment_event_name_here',
properties: {
course_id: skilljarCourse.id,
course_title: skilljarCourse.title,
published_course_id: skilljarCourse.publishedCourseId
},
},
]);
}
</script>
<!-- End hubspot send enrollment-->
Please note that you will need to replace enrollment_event_name_here with the name associated with your custom enrollment event. You will also want to ensure that the custom properties we are passing above - course_id, course_title, and published_course_id - are set on the custom enrollment event you have created in Hubspot. Hubspot walks through how to view and update the properties of a custom event in the Hubspot UI in this documentation - https://developers.hubspot.com/docs/reference/api/analytics-and-events/tracking-code#send-custom-event-data-enterprise-only
As mentioned before, this event will be associated with the Hubspot Visitor and Contact objects, so there would be no reason to include Skilljar User information in the tracking event itself. If you would like to add other custom properties to this event you are able to modify the snippet to include those properties.
To track Course Completion please place the following snippet in the Course Completion Snippet section of your theme.
<!-- Start hubspot send completion-->
<script>
var _hsq = window._hsq = window._hsq || [];
if (skilljarCourse !== 'undefined') {
window._hsq.push([
'trackCustomBehavioralEvent',
{
name: 'completion_event_name_here',
properties: {
course_id: skilljarCourse.id,
course_title: skilljarCourse.title,
published_course_id: skilljarCourse.publishedCourseId
},
},
]);
}
</script>
<!-- End hubspot send completion-->
Same as for the enrollment snippet, you will want to replace completion_event_name_here with the name of the custom event you created for tracking completions. That event should also contain the custom properties course_id, course_title, and published_course_id.
Once you have added those snippets to your theme, when a Skilljar student enrolls or completes a course we will send a custom event to your Hubspot instance that will allow you to report on registrations and completions, as well as create custom workflows within Hubspot based on those events.
Option 2: Course Specific Enrollment and Completion Events
When you create the custom enrollment and completion events in Hubspot, they will provide a name value that Hubspot uses to track instances of that event. If you plan on creating a custom enrollment and completion event for each of your courses, which may allow you to create more robust custom workflows beyond your basic tracking and reporting needs, you will need to add some extra logic to your theme that maps the custom event name to the Skilljar Course's ID so we know which event we should associate with when students register or complete a course.
This requires two JSON objects be placed in your theme that can be accessed by the tracking snippets. Below is an example of the JSON objects you would want to create and add to the Global Head Snippet section of your theme.
<!-- Start hubspot custom object map-->
<script>
var enrollmentCourseIdsMap = {
'abcd1234' : 'custom_event_name_for_abcd1234_enrollment',
'hijk5678' : 'custom_event_name_for_hijk5678_enrollment',
'lmno9101' : 'custom_event_name_for_lmno9101_enrollment'
}
var completionCourseIdsMap = {
'abcd1234' : 'custom_event_name_for_abcd1234_completion',
'hijk5678' : 'custom_event_name_for_hijk5678_completion',
'lmno9101' : 'custom_event_name_for_lmno9101_completion'
}
</script>
<!-- End hubspot custom object map-->
In the example above abcd1234, hijk5678, and lmno9101are the Skilljar Course IDs and the custom_event_name_forvalues are the Hubspot custom event names for the enrollment and completion events associated with those courses. Following this pattern you will want to replace the IDs for the Skilljar Course IDs you want to track, and update the event name for the Hubspot custom event name for that specific course action.
To track Course Enrollment for specific courses please place the following snippet in the Course Conversion Snippet section of your theme.
<!-- Start hubspot send enrollment-->
<script>
var _hsq = window._hsq = window._hsq || [];
if (skilljarCourse !== 'undefined') {
window._hsq.push([
'trackCustomBehavioralEvent',
{
name: enrollmentCourseIdsMap[skilljarCourse.id],
properties: {
course_id: skilljarCourse.id,
course_title: skilljarCourse.title,
published_course_id: skilljarCourse.publishedCourseId
},
},
]);
}
</script>
<!-- End hubspot send enrollment-->
You will notice that we have set the namefield to a dynamic value that will grab that Skilljar Course ID and search theenrollmentCourseIdsMapJSON object to find the custom Hubspot event name that maps to that specific course's enrollment.
You will also want to ensure that the custompropertieswe are passing above - course_id, course_title, and published_course_id - are set on the custom enrollment event you have created in Hubspot. Hubspot walks through how to view and update the properties of a custom event in the Hubspot UI in this documentation - https://developers.hubspot.com/docs/reference/api/analytics-and-events/tracking-code#send-custom-event-data-enterprise-only
As mentioned before, this event will be associated with the Hubspot Visitor and Contact objects, so there would be no reason to include Skilljar User information in the tracking event itself.
To track Course Completion for specific courses please place the following snippet in the Course Completion Snippet section of your theme.
<!-- Start hubspot send completion-->
<script>
var _hsq = window._hsq = window._hsq || [];
if (skilljarCourse !== 'undefined') {
window._hsq.push([
'trackCustomBehavioralEvent',
{
name: completionCourseIdsMap[skilljarCourse.id],
properties: {
course_id: skilljarCourse.id,
course_title: skilljarCourse.title,
published_course_id: skilljarCourse.publishedCourseId
},
},
]);
}
</script>
<!-- End hubspot send completion-->
Same as for the enrollment snippet, you will notice that we have set the name field to a dynamic value that will grab that Skilljar Course ID and search the completionCourseIdsMap JSON object to find the custom Hubspot event name that maps to that specific course's completion. That event should also contain the custom properties course_id, course_title, and published_course_id.
If you have followed these steps above and are experiencing issues with the data passed to Hubspot please email support@skilljar.com for assistance.