HubSpot Integrations Overview

HubSpot CMS Hub provides multiple methods to integrate external analytics platforms, tag managers, and marketing pixels. This section covers HubSpot-specific implementation details and best practices for each integration.

Available Integrations

Analytics Platforms

Google Analytics 4

• Site Header HTML implementation (global)
• Custom module implementation (selective pages)
• HubL variable integration for dynamic tracking
• Native HubSpot analytics alongside GA4
• Form submission and CTA tracking

Tag Management

Google Tag Manager

• Site Header HTML installation (recommended)
• Template-level implementation
• Custom data layer using HubL
• Integration with HubSpot forms and CTAs
• CRM data variables

Marketing Pixels

Meta Pixel

• Site Header HTML implementation
• Custom event tracking with HubSpot forms
• Integration with HubSpot meeting scheduler
• CRM-based audience building

HubSpot-Specific Integration Considerations

Where to Add Tracking Code

HubSpot provides several locations to add custom code:

1. Site Header HTML (Global - Recommended)

• Location: Settings → Website → Pages → Site Header HTML
• Loads: On every page of your site
• Use for: GA4, GTM, Meta Pixel base installation
• Pros: Easy to manage, one location for all pages
• Cons: Cannot be excluded from specific pages

2. Site Footer HTML (Global)

• Location: Settings → Website → Pages → Site Footer HTML
• Loads: At the end of every page
• Use for: Non-critical tracking scripts
• Pros: Doesn't block page rendering
• Cons: May fire after user leaves page

3. Page-Level Code Snippets

• Location: Page → Advanced Options → Additional code snippets
• Loads: Only on specific pages
• Use for: Page-specific tracking or experiments
• Pros: Granular control
• Cons: Must be added to each page manually

4. Template Code (Developers)

• Location: Design Tools → Templates
• Loads: On pages using that template
• Use for: Custom implementations requiring HubL
• Pros: Full control with HubL variables
• Cons: Requires design tools access and coding knowledge

5. Blog Settings

• Location: Settings → Website → Blog → Advanced
• Loads: On all blog pages (listing and posts)
• Use for: Blog-specific tracking
• Pros: Separate from main site code
• Cons: Only affects blog

6. Custom Modules

• Location: Design Tools → Modules
• Loads: Where module is added
• Use for: Reusable tracking components
• Pros: Reusable, can include HubL logic
• Cons: Requires module development

HubSpot Native Analytics

HubSpot automatically tracks:

• Page views - All pages across your site
• Form submissions - All HubSpot forms
• CTA clicks - All HubSpot CTAs
• Meeting bookings - Meetings tool interactions
• Traffic sources - Where visitors came from
• Session details - Duration, pages per session

Important: When adding external analytics (GA4, etc.), you may see duplicate data for the same events. See Analytics Conflicts below.

CRM Integration Opportunities

HubSpot's CRM integration allows unique tracking capabilities:

Track by Contact Properties:

// Access contact data in custom code
var visitorEmail = '{{ contact.email }}';
var lifecycleStage = '{{ contact.lifecycle_stage }}';
var leadSource = '{{ contact.hs_analytics_source }}';

// Send to GA4 as user properties
gtag('set', 'user_properties', {
  lifecycle_stage: lifecycleStage,
  lead_source: leadSource
});

Track by Company Properties:

// Company data (for known contacts)
var companyName = '{{ contact.associatedcompany.name }}';
var companyIndustry = '{{ contact.associatedcompany.industry }}';

// Send to analytics
dataLayer.push({
  company_name: companyName,
  company_industry: companyIndustry
});

Personalized Tracking:

// Track different content variations
{% if contact.lifecycle_stage == "customer" %}
  // Track customer-specific content views
  gtag('event', 'customer_content_view', {
    page_section: 'premium_features'
  });
{% elif contact.lifecycle_stage == "lead" %}
  // Track lead-specific content
  gtag('event', 'lead_content_view', {
    page_section: 'free_trial'
  });
{% endif %}

Form Tracking Integration

HubSpot forms have built-in tracking, but you can enhance with custom code:

HubSpot Form Events API:

// Listen to HubSpot form submissions
window.addEventListener('message', event => {
  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
    const formData = event.data.data;

    // Send to GA4
    gtag('event', 'generate_lead', {
      form_id: event.data.id,
      form_name: formData.formGuid
    });

    // Send to Meta Pixel
    fbq('track', 'Lead', {
      content_name: formData.formGuid
    });

    // Send to GTM Data Layer
    dataLayer.push({
      event: 'form_submission',
      formId: event.data.id,
      formType: 'hubspot_form'
    });
  }
});

CTA Tracking Integration

Track HubSpot CTA clicks in external analytics:

// Listen to CTA clicks
document.addEventListener('click', function(event) {
  // Check if clicked element is a HubSpot CTA
  const ctaElement = event.target.closest('.cta_button, [class*="hs-cta"]');

  if (ctaElement) {
    const ctaId = ctaElement.getAttribute('data-hs-cta-id');
    const ctaText = ctaElement.textContent.trim();

    // Send to GA4
    gtag('event', 'cta_click', {
      cta_id: ctaId,
      cta_text: ctaText,
      page_location: window.location.href
    });

    // Send to GTM
    dataLayer.push({
      event: 'cta_click',
      ctaId: ctaId,
      ctaText: ctaText
    });
  }
});

Meeting Scheduler Integration

Track meeting bookings from HubSpot's meetings tool:

// Listen for meeting bookings
window.addEventListener('message', function(event) {
  if (event.data.meetingBookSucceeded) {
    const meetingData = event.data.meetingPayload;

    // Send to GA4
    gtag('event', 'meeting_booked', {
      meeting_type: meetingData.meetingType,
      duration: meetingData.duration
    });

    // Send to Meta Pixel
    fbq('track', 'Schedule', {
      content_name: 'meeting_booking',
      value: 1.00,
      currency: 'USD'
    });
  }
});

Analytics Conflicts

When using both HubSpot Analytics and external tools, you may encounter:

Duplicate Event Tracking

Problem: Same event tracked by both HubSpot and GA4/GTM.

Example: Form submission tracked by:

1. HubSpot native analytics
2. GA4 via form event listener
3. GTM via custom trigger

Solution:

• Use HubSpot analytics for CRM-focused reporting
• Use GA4/GTM for website behavior and attribution
• Clearly document which system is the source of truth for each metric
• Consider disabling duplicate tracking in one system

Different Session Definitions

HubSpot sessions: 30 minutes of inactivity (not configurable)

GA4 sessions: Configurable, default 30 minutes

Impact: Session counts may differ slightly between platforms.

Solution: Accept minor discrepancies; focus on trends over absolute numbers.

Contact vs. User Identification

HubSpot: Tracks identified contacts (email-based) and anonymous visitors

GA4: Tracks users via Client ID (cookie-based) and User ID (if implemented)

Difference: Different user counting methodologies.

Solution:

• Use HubSpot for known contact attribution
• Use GA4 for overall user behavior
• Implement GA4 User ID using HubSpot contact ID for better alignment

Integration Best Practices

1. Use Google Tag Manager for Centralized Management

Instead of adding multiple scripts to Site Header HTML:

• Install GTM once in Site Header HTML
• Add all other tags (GA4, Meta Pixel, etc.) through GTM
• Easier to manage, update, and troubleshoot
• Better performance (single container load)

See Install Google Tag Manager.

2. Leverage HubL for Dynamic Tracking

Use HubL to pass dynamic data to analytics:

// Pass page metadata to data layer
dataLayer.push({
  pageType: '{{ content.type }}',
  pageId: '{{ content.id }}',
  pageName: '{{ content.name }}',
  author: '{{ content.blog_post_author.display_name }}',
  publishDate: '{{ content.publish_date }}',
  tags: [{% for tag in content.topic_list %}'{{ tag.name }}'{% if not loop.last %},{% endif %}{% endfor %}]
});

3. Test Across Content Types

Always test integrations across different HubSpot content types:

• Website pages - Standard pages
• Landing pages - Conversion pages
• Blog posts - Blog articles and listing pages
• System pages - 404, search results, thank you pages

4. Respect Privacy & Consent

HubSpot supports privacy regulations through:

• Cookie consent banners
• IP anonymization
• GDPR compliance features

Implement consent management:

// Check HubSpot cookie consent banner selection
var _hsq = window._hsq = window._hsq || [];

_hsq.push(['addPrivacyConsentListener', function(consent) {
  if (consent.allowed) {
    // User accepted cookies - initialize analytics
    gtag('consent', 'update', {
      'analytics_storage': 'granted'
    });
  } else {
    // User declined - don't track
    gtag('consent', 'update', {
      'analytics_storage': 'denied'
    });
  }
}]);

5. Monitor Performance Impact

External scripts can impact page performance:

• Use async/defer attributes on script tags
• Load non-critical scripts after page load
• Monitor Largest Contentful Paint (LCP)
• Test with PageSpeed Insights

Example of async loading:

<!-- Async GTM (recommended) -->
<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX"></script>

<!-- Defer GA4 (alternative) -->
<script defer src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

Testing Your Integrations

1. Use HubSpot Preview Mode

Test before publishing:

• Edit page → Preview
• Open browser DevTools → Console
• Verify scripts load and fire correctly
• Check for JavaScript errors

2. Verify in Analytics Platforms

Google Analytics 4:

• Open GA4 → Reports → Realtime
• Navigate your HubSpot site
• Verify events appear within 30 seconds

Google Tag Manager:

• Enable Preview mode
• Visit your HubSpot site
• Verify tags fire on correct triggers

Meta Pixel:

• Install Meta Pixel Helper browser extension
• Visit your HubSpot site
• Verify pixel loads and fires events

3. Check for Conflicts

Common issues:

• Multiple instances of same tracking code
• Scripts blocking each other
• HubSpot native analytics conflicting with external tools
• Form submissions firing multiple times

See Troubleshooting Events Not Firing.

Next Steps

Choose your integration to get started:

• Install Google Analytics 4 - Set up GA4 on HubSpot
• Install Google Tag Manager - Install GTM for flexible tag management
• Install Meta Pixel - Add Facebook/Instagram tracking

For general integration concepts, see the global integrations hub.