Skip to content

Hubspot example #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Hubspot example #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1b6ca52
add hubspot example app
devkiran Sep 16, 2025
07a0930
Update index.html
devkiran Sep 16, 2025
949a935
finalize example app
devkiran Sep 18, 2025
478b046
Update meeting.html
devkiran Sep 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions conversions/hubspot/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
</head>
<body>
<h1>Contact us</h1>
<!-- Load HubSpot forms library -->
<script src="https://js.hsforms.net/forms/embed/47839131.js" defer></script>

<!-- Load Dub analytics script -->
<script
src="https://www.dubcdn.com/analytics/script.js"
defer
data-domains='{"refer":"acme.link"}'
></script>

<div
class="hs-form-frame"
data-region="na1"
data-form-id="07b7409d-cf6b-4d9f-9926-76d55b591e88"
data-portal-id="47839131"
></div>

<script>
// Read cookie value
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);

if (parts.length === 2) {
return parts.pop().split(";").shift();
}

return null;
}

// Listen for the form ready event
window.addEventListener("hs-form-event:on-ready", (event) => {
const clickId = getCookie("dub_id");

if (!clickId) {
console.debug("clickId not found. Skipping lead tracking.");
return;
}

// Add the clickId to the form
// Note: Make sure you have a hidden field with connected property "dub_id"
HubSpotFormsV4.getForms()[0].setFieldValue("0-1/dub_id", clickId);
});
</script>
</body>
</html>
103 changes: 103 additions & 0 deletions conversions/hubspot/meeting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
</head>
<body>
<h1>Contact us</h1>

<!-- Load Dub analytics script -->
<script>
!(function (c, n) {
c[n] =
c[n] ||
function () {
(c[n].q = c[n].q || []).push(arguments);
};
["trackClick", "trackLead", "trackSale"].forEach(
(t) => (c[n][t] = (...a) => c[n](t, ...a))
);
var s = document.createElement("script");
s.defer = 1;
s.src = "https://dubcdn.com/analytics/script.conversion-tracking.js";
s.setAttribute(
"data-publishable-key",
"dub_pk_tLnpzXvJAEik0UtzuzdmMJSn"
); // Replace with your publishable key
s.setAttribute("data-domains", '{"refer":"dub.sh"}');
s.setAttribute("data-api-host", "http://localhost:8888/api");
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
s.setAttribute("data-api-host", "http://localhost:8888/api");

The analytics script is configured to use a localhost development URL that will fail in production.

View Details

Analysis

Hard-coded localhost API URL breaks analytics in production deployment

What fails: Dub analytics script in conversions/hubspot/meeting.html uses hard-coded data-api-host="http://localhost:8888/api" that fails outside development environment

How to reproduce:

# Deploy meeting.html to any non-localhost environment
# Analytics calls fail with connection refused/network errors
curl -I http://localhost:8888/api  # Fails on production servers

Result: Analytics tracking requests fail, no conversion data collected. Browser console shows network errors attempting to reach localhost:8888.

Expected: Should use default production API endpoint https://api.dub.co like other examples in the repository per Dub Analytics documentation

document.head.appendChild(s);
})(window, "dubAnalytics");
</script>

<div
class="meetings-iframe-container"
data-src="https://meetings.hubspot.com/kiran61?embed=true"
></div>

<!-- Load Meetings Embed Script -->
<script
type="text/javascript"
src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"
></script>

<script>
// Read cookie value
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);

if (parts.length === 2) {
return parts.pop().split(";").shift();
}

return null;
}

// Listen for the message event
window.addEventListener("message", function (event) {
// Check if the message is from the scheduling widget
if (event.origin === "https://meetings.hubspot.com") {
const clickId = getCookie("dub_id");

if (!clickId) {
console.debug("clickId not found. Skipping lead tracking.");
return;
}

// Get the data from the event
const data = event.data;

if (data.meetingBookSucceeded) {
// Get the scheduled contact
const contact =
data.meetingsPayload.bookingResponse.postResponse.contact;

if (!contact) {
console.debug("contact not found. Skipping lead tracking.");
return;
}

console.debug("contact found", contact);

// Track the lead with the scheduled contact
const customerName = [contact.firstName, contact.lastName]
.filter(Boolean)
.join(" ");

dubAnalytics.trackLead({
clickId,
mode: "deferred",
eventName: "Meeting scheduled",
customerExternalId: contact.email,
customerName: customerName,
customerEmail: contact.email,
});
}
}
});
</script>
</body>
</html>