Learn how to track website traffic and donation attempts with HubSpot.

In addition to tracking donor events, you can also choose to sync donation data via our first-party HubSpot CRM integration or via Zapier.

​
HubSpot Tracking Code Integration

This integration script is a template based on our JS API and can be customized according to your requirements.

​
Getting Started

The HubSpot tracking code unique to each account helps HubSpot monitor website traffic. More details are available at HubSpot documentation.

​
Track Events

Events help track actions, associating them with contact records to determine if a contact attempted or completed a donation. Events require a Marketing Hub Enterprise account.

  • Track checkout open:

    <script>

  Givetly.on('checkoutOpen', function(details) {

    _hsq.push(["trackEvent", { id: "Checkout Open" }]);

  });

</script>

  • Track completed donation:

    <script>

  Givetly.on('donationComplete', function(details) {

    var eventName = details.donation.recurring ? 'Recurring Donation' : 'One Time Donation';

    _hsq.push(['trackEvent', { id: eventName, value: details.donation.amount }]);

  });

</script>

​
Track Contact

Identify a visitor to your site by email. If there’s an existing contact, it’s updated; if not, a new record is created. This process links analytics data with the contact.

<script>

  Givetly.on('donationComplete', function(details) {

    var _hsq = window._hsq = window._hsq || [];

    var user = details.supporter;

    var customFields = details.customFields;



    // Map data to custom HubSpot properties

    _hsq.push(['identify', {

      email: user.email,

      firstname: user.firstName,

      lastname: user.lastName,

      platform: 'givetly',

      last_donation_amount: details.donation.amount,

      last_donation_currency: details.donation.currency,

      last_donation_frequency: details.donation.recurring ? 'Monthly' : 'One Time',

      last_donation_date_utc: new Date().setUTCHours(0, 0, 0, 0),

      utm_source: customFields.utm_source,

      // add more fields as necessary

    }]);



    // Send data to HubSpot

    _hsq.push(['trackPageView']);

  });

</script>

​
Track Form

For advanced use, treat the Checkout as a form submission with multiple fields. This approach may not be necessary if givetly’s CRM integration is already connected.

  • Create the form in HubSpot first, including all fields to track.
<script>

  Givetly.on('donationComplete', function(details) {

    // Replace portalId and formId with your form info

    var portalId = 'your-portal-id';

    var formId = 'your-form-id';

    var url = 'https://api.hsforms.com/submissions/v3/integration/submit/' + portalId + '/' + formId;



    // Request JSON

    var data = {

      submittedAt: Date.now(),

      fields: [

        { name: 'campaign_id', value: details.campaign.id },

        { name: 'campaign_code', value: details.campaign.code || '' },

        { name: 'campaign_name', value: details.campaign.name },

        { name: 'donation_id', value: details.donation.id },

        { name: 'donation_amount', value: details.donation.amount },

        { name: 'donation_currency', value: details.donation.currency },

        { name: 'donation_frequency', value: details.donation.recurring ? 'Monthly' : 'One Time' },

        { name: 'supporter_id', value: details.supporter.id },

        { name: 'supporter_first_name', value: details.supporter.firstName },

        { name: 'supporter_email', value: details.supporter.email },

      ],

      context: { hutk: ':hutk' },

      legalConsentOptions: { consent: { consentToProcess: true, text: 'I agree...', communications: [{ value: true, subscriptionTypeId: 999, text: 'I agree...' }] } }

    };



    // Send request

    var xhr = new XMLHttpRequest();

    xhr.open('POST', url);

    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.send(JSON.stringify(data));

  });

</script>

Create a HubSpot Automation Workflow to use the data collected for subsequent actions like creating a Deal or enrolling in a welcome series.

HubSpot Integration360MatchPro Integration