# WordPress/Blog HubSpot Integration Guide


**Last Updated:** 2025-11-20

Guide for integrating HubSpot tracking and form submissions into WordPress blog posts and pages.

## Overview

WordPress blog posts managed by the CMS need HubSpot tracking to capture leads and attribute conversions properly. This guide covers how to add HubSpot tracking code and extract `hubspotutk` for form submissions.

## Integration Approach

### Option 1: Theme Footer Integration (IMPLEMENTED)

HubSpot tracking code and UTM tracking script are already integrated in the WordPress theme's footer template (`wp-content/themes/ordio/footer.php`).

#### Current Implementation

**HubSpot Tracking Script:**

- Location: Loaded via `v2/base/footer.php` (included in WordPress footer.php)
- Script: `https://js-eu1.hs-scripts.com/145133546.js`
- Attributes: `async defer crossorigin="anonymous" onload="window.hubspotScriptLoaded = true;"`
- Placement: End of `v2/base/footer.php`, before closing `</body>` tag

**UTM Tracking Script:**

- Location: `wp-content/themes/ordio/footer.php` (line ~144)
- Script: `/v2/js/utm-tracking.min.js` (minified version)
- Attributes: `defer` (non-blocking)
- Version parameter: Uses `filemtime()` for cache busting
- Placement: After HubSpot script, before `wp_footer()` call

**Script Loading Order:**

1. HubSpot tracking script (from `v2/base/footer.php` - included early)
2. UTM tracking script (from WordPress `footer.php`)
3. Lead capture components (from WordPress `footer.php`)
4. Lead capture triggers script (from WordPress `footer.php`)
5. WordPress form handler (from WordPress `footer.php`)

**File Structure:**

```
wp-content/themes/ordio/footer.php
├── Includes: ./v2/base/footer.php (contains HubSpot script)
├── UTM Tracking Script (minified, deferred)
├── Lead Capture Components
├── Lead Capture Triggers Script (minified, deferred)
└── WordPress Form Handler (for Contact Form 7, Gravity Forms, etc.)
```

**Note:** The path uses `$_SERVER['DOCUMENT_ROOT']` for absolute path resolution, ensuring it works regardless of WordPress installation structure.

#### Step 3: Extract hubspotutk in Forms

When submitting forms in WordPress (contact forms, newsletter signups, etc.), extract `hubspotutk` and include it in the form submission:

```javascript
// Method 1: Use global helper function (recommended)
const hubspotutk = window.getHubspotutkGlobal() || "";

// Method 2: Use UTMTracker if available
const hubspotutk =
  window.utmTracker && typeof window.utmTracker.getHubspotutk === "function"
    ? window.utmTracker.getHubspotutk() || ""
    : "";

// Method 3: Direct cookie extraction (fallback)
const hubspotutk =
  (document.cookie.match(/(?:^|.*;\s*)hubspotutk\s*=\s*([^;]*).*$/) || [])[1] ||
  "";

// Include in form submission
formData.append("hubspotutk", hubspotutk);
```

### Option 2: WordPress Plugin

Create a simple WordPress plugin to add HubSpot tracking:

```php
<?php
/**
 * Plugin Name: Ordio HubSpot Integration
 * Description: Adds HubSpot tracking code and UTM tracking to WordPress
 * Version: 1.0.0
 */

function ordio_hubspot_tracking_script() {
    ?>
    <!-- HubSpot Tracking Script -->
    <script type="text/javascript" id="hs-script-loader" async defer src="https://js-eu1.hs-scripts.com/145133546.js" crossorigin="anonymous" onload="window.hubspotScriptLoaded = true;"></script>

    <!-- UTM Tracking Script -->
    <script src="https://www.ordio.com/v2/js/utm-tracking.min.js"></script>
    <?php
}
add_action('wp_footer', 'ordio_hubspot_tracking_script');
```

## Form Submission Pattern

### WordPress Contact Forms (Contact Form 7, Gravity Forms, etc.)

For WordPress contact form plugins, you'll need to add JavaScript to extract `hubspotutk` and include it in the form submission:

```javascript
document.addEventListener("DOMContentLoaded", function () {
  // Find your form (adjust selector based on your form plugin)
  const form = document.querySelector(
    ".wpcf7-form, .gform_wrapper form, #contact-form"
  );

  if (form) {
    form.addEventListener("submit", function (e) {
      // Extract hubspotutk
      const hubspotutk = window.getHubspotutkGlobal() || "";

      // Add hidden field or append to form data
      let hubspotutkField = form.querySelector('input[name="hubspotutk"]');
      if (!hubspotutkField) {
        hubspotutkField = document.createElement("input");
        hubspotutkField.type = "hidden";
        hubspotutkField.name = "hubspotutk";
        form.appendChild(hubspotutkField);
      }
      hubspotutkField.value = hubspotutk;
    });
  }
});
```

### Custom WordPress Forms

For custom forms, include `hubspotutk` directly in your form submission:

```javascript
// AJAX form submission
fetch("/wp-admin/admin-ajax.php", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  body: new URLSearchParams({
    action: "your_custom_action",
    name: formData.name,
    email: formData.email,
    message: formData.message,
    hubspotutk: window.getHubspotutkGlobal() || "", // CRITICAL: Include hubspotutk
  }),
});
```

## HubSpot Forms API v3 Integration

If submitting directly to HubSpot Forms API v3 from WordPress, use this pattern:

```javascript
const hubspotutk = window.getHubspotutkGlobal() || "";

const hubspotData = {
  fields: [
    {
      name: "email",
      value: email,
    },
    // ... other fields ...
  ],
  context: {
    hutk: hubspotutk || null, // CRITICAL: Links form submission to browser session
    pageUri: window.location.href,
    pageName: document.title,
    // Note: ipAddress is automatically detected by HubSpot
  },
};

fetch(
  "https://api.hsforms.com/submissions/v3/integration/submit/145133546/{FORM_GUID}",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(hubspotData),
  }
);
```

## Global Helper Functions

The UTM tracking script (`utm-tracking.js`) provides global helper functions that can be used independently:

### `window.getHubspotutkGlobal()`

Returns the `hubspotutk` cookie value, with fallback to direct cookie extraction if UTMTracker is not available.

```javascript
const hubspotutk = window.getHubspotutkGlobal() || "";
```

### `window.getCookieGlobal(name)`

Returns any cookie value by name.

```javascript
const cookieValue = window.getCookieGlobal("cookieName");
```

## Testing Checklist

**Implementation Complete:**

- [x] HubSpot tracking script loads on WordPress pages (via `v2/base/footer.php`)
- [x] UTM tracking script loads on WordPress pages (minified, deferred)
- [x] `window.getHubspotutkGlobal()` function available (in minified `utm-tracking.min.js`)
- [x] WordPress form handler extracts `hubspotutk` for Contact Form 7, Gravity Forms, and generic forms
- [x] Lead capture popup extracts `hubspotutk` (already implemented)
- [x] Scripts use minified versions for performance
- [x] Scripts use `defer` attribute for non-blocking loading
- [x] Cache busting works correctly (filemtime version parameters)

**Manual Testing Required:**

- [ ] Verify `hubspotutk` cookie is set by HubSpot script on WordPress pages
- [ ] Test `window.getHubspotutkGlobal()` returns cookie value in browser console
- [ ] Test form submissions include `hubspotutk` in data (check Network tab)
- [ ] Verify HubSpot contact activity timeline shows page views
- [ ] Verify UTM parameters are captured and stored correctly in HubSpot

## Troubleshooting

### hubspotutk Not Available

**Possible causes:**

- HubSpot tracking script not loaded
- Cookie blocked by browser/privacy settings
- Script loading order issue

**Solution:**

- Verify HubSpot script loads before form submission
- Check browser console for errors
- Test in incognito mode (cookies may be blocked)
- Use fallback cookie extraction method

### Forms Not Submitting hubspotutk

**Possible causes:**

- JavaScript not executing
- Form plugin doesn't support custom fields
- AJAX submission not including hubspotutk

**Solution:**

- Check browser console for JavaScript errors
- Verify form submission includes hubspotutk field
- Test with browser DevTools Network tab
- Use form plugin hooks/filters to add hubspotutk

## Reference

- [HubSpot Integration Guide](./HUBSPOT_INTEGRATION_GUIDE.md) - Complete integration patterns
- [HubSpot Testing Checklist](./HUBSPOT_TESTING_CHECKLIST.md) - Testing procedures
- `v2/js/utm-tracking.js` - UTM tracking script with global helpers