Tracking Code Integration
Learn how to track website traffic and donation attempts with HubSpot
HubSpot Tracking Code Integration
This integration script is a template based on our JS API and may be customized to your own needs.
Getting Started
The HubSpot tracking code is unique to each HubSpot account and allows HubSpot to monitor your website traffic.
Please see more at https://knowledge.hubspot.com/reports/install-the-hubspot-tracking-code.
Track Events
Events are used to track that some action that occurs, and can be tied to a contact record so that you can see if/when a contact triggered that event. We assume that in most cases you'd want to see if your HS contacts have attempted to donate and if they complete a donation.
1<script>
2
3 // track checkout open
4 FundraiseUp.on('checkoutOpen', function(details) {
5 _hsq.push(["trackEvent", {
6 id: "Fundraise Up Checkout Open"
7 }]
8 );
9
10});
11
12// track completed donation
13FundraiseUp.on('donationComplete', function(details) {
14
15var eventName = 'Fundraise Up One Time Donation';
16
17if (details.donation.recurring) {
18 eventName = 'Fundraise Up Recurring Donation'
19}
20
21_hsq.push(['trackEvent', {
22 id: eventName,
23 value: details.donation.amount
24 }]);
25});
26
27</script>Track Contact
This is used to identify a visitor to your site. The unique identifier is an email address. If there is an existing contact record for that email address, it will be updated. Otherwise, a new contact record will be created. In both cases, the analytics data collected for the visitor will be associated with the contact record.
1<script>
2
3FundraiseUp.on('donationComplete', function(details) {
4
5 var _hsq = window._hsq = window._hsq || [];
6 var user = details.supporter;
7 var customFields = details.customFields;
8
9 /*
10 This sets the email,
11 as well as custom properties of your contact.
12 Note: your custom properties MUST be created first within your HubSpot account.
13 */
14
15 _hsq.push(['identify', {
16 email: user.email,
17 firstname: user.firstName,
18 lastname: user.lastName,
19
20 // optionally map any of the available Fundraise Up datapoints
21 // to your custom HubSpot properties
22
23 platform: 'Fundraise Up',
24 last_donation_amount: details.donation.amount,
25 last_donation_currency: details.donation.currency,
26 last_donation_frequency: details.donation.recurring ? 'Monthly' : 'One Time',
27 last_donation_date_utc: new Date().setUTCHours(0,0,0,0),
28
29 // optionally map custom fields such us UTM tags.
30 utm_source: customFields.utm_source,
31 utm_medium: customFields.utm_medium,
32 utm_campaign: customFields.utm_campaign,
33 utm_term: customFields.utm_term,
34 utm_keyword: customFields.utm_keyword,
35 utm_content: customFields.utm_content,
36 }]);
37
38 // send data to HS
39 _hsq.push(['trackPageView']);
40
41});
42
43</script>Track Form
If you really want to get fancy with HubSpot, you may want to see the Fundraise Up Checkout experience as submitting a form with multiple fields. You may want to create an Automation Workflow in your HubSpot account that processes the submitted data (for example, create new Deal for each submitted donation, and enroll in a welcome series)
1<script>
2
3// create or update HS contact with information received from donation
4
5FundraiseUp.on('donationComplete', function(details) {
6
7 // Replace portalId and formId with information from your FORM
8 var portalId = '7376849';
9 var formId = 'fdf6ffce-1a9a-4b61-b5ff-8e3d395ab05b';
10 var url = 'https://api.hsforms.com/submissions/v3/integration/submit/' + portalId + '/' + formId;
11
12 // Build request JSON:
13 var data = {
14 'submittedAt': Date.now(),
15 'fields': [
16 {
17 'name': 'campaign_id',
18 'value': details.campaign.id
19 },
20 {
21 'name': 'campaign_code',
22 'value': details.campaign.code ? details.campaign.code : ''
23 },
24 {
25 'name': 'campaign_name',
26 'value': details.campaign.name
27 },
28 {
29 'name': 'donation_id',
30 'value': details.donation.id
31 },
32 {
33 'name': 'donation_amount',
34 'value': details.donation.amount
35 },
36 {
37 'name': 'donation_currency',
38 'value': details.donation.currency
39 },
40 {
41 'name': 'donation_frequency',
42 'value': details.donation.recurring ? 'Monthly' : 'One Time'
43 },
44 {
45 'name': 'supporter_id',
46 'value': details.supporter.id
47 },
48 {
49 'name': 'supporter_first_name',
50 'value': details.supporter.firstName
51 },
52 {
53 'name': 'supporter_email',
54 'value': details.supporter.email
55 },
56 {
57 'name': 'supporter_utm_source',
58 'value': details.customFields.utm_source ? details.customFields.utm_source : ''
59 }
60
61 ],
62 'context': {
63 'hutk': ':hutk' // include this parameter and set it to the hubspotutk cookie value to enable cookie tracking on your submission
64 },
65 'legalConsentOptions': { // Include this object when GDPR options are enabled
66 'consent': {
67 'consentToProcess': true,
68 'text':'I agree to allow Example Company to store and process my personal data.',
69 'communications': [
70 {
71 'value': true,
72 'subscriptionTypeId': 999, // replace with your subscription ID
73 'text':'I agree to receive marketing communications from Example Company.'
74 }
75 ]
76 }
77 }
78 };
79
80 if (details.designation) {
81 var designationData = [
82 {
83 'name': 'designation_id',
84 'value': details.designation.id
85 },
86 {
87 'name': 'designation_name',
88 'value': details.designation.name
89 },
90 {
91 'name': 'designation_code',
92 'value': details.designation.code
93 },
94 ];
95 data.fields = data.fields.concat(designationData);
96 }
97
98 // Create the new request
99 var xhr = new XMLHttpRequest();
100 xhr.open('POST', url);
101 xhr.setRequestHeader('Content-Type', 'application/json');
102
103 // Sends the request
104 xhr.send(JSON.stringify(data));
105
106});
107
108</script>