How can I log a pageview without using the Hubspot Javascript?

davidgubler · ‎May 27, 2020

I can log events using https://developers.hubspot.com/docs/methods/enterprise_events/http_api just fine (both from our back-end and our own javascript), but they show up as "Analytics activity" (event) under "Activity" in my contacts; I want them to show up as "Page View". I can't find any documentation on how to use a tracking pixel or similar to log page views.

What I found so far is that the tracking pixel for page views seems to be https://track.hubspot.com/__ptq.gif?k=1, but just using that doesn't work, at least the hubid is missing, and the parameters seem very obscure.

I know I can run the hubspot javascript on a separate domain in a hidden iframe to isolate it from our page, but I'd rather not go that route. Tracking a page view using a tracking pixel seems such basic functionality that I can hardly believe that it isn't possible somehow, but maybe I'm just overlooking something.

Thanks for any pointers!

davidgubler · ‎Jun 8, 2020

In case anyone stumbles over this, we've set up a Caddy (simple web server) in Kubernetes on a special domain (hubspot-data-forwarder.example.com) with the following configuration:

{
http_port 8080
admin off
}

http://hubspot-data-forwarder.example.com {
respond /healthz "OK" 200
header Cache-Control no-cache

respond / "<!DOCTYPE html>
<html>
<head>
<script src='https://js.hs-scripts.com/YOUR-HUBSPOT-TRACKING-ID-INSERT-HERE.js'></script>
<script>
var params = {};
for(let entry of (new URLSearchParams(window.location.search)).entries()) {
const [key, value] = entry;
params[key] = value;
}
var _hsq = window._hsq = window._hsq || [];
if (params['url']) {
var url = params['url'].replace(/^https?\:\/\//i, '');
url = url.split('?')[0];
document.title = url;
url = '/r/' + url;
_hsq.push(['setPath', url]);
delete params['url'];
}
if (params['email']) {
_hsq.push(['identify', params]);
}
</script>
</head>
</html>" 200
header Cache-Control no-cache
header Content-Type "text/html; charset=UTF-8"
}

Now whenever we want to track something we can embed a hidden iframe into the page, like this:

$(document).ready(function () {
var data = $('script#hubspot').data();
data['url'] = window.location.href;
var i = document.createElement('iframe');
i.style.display = 'none';
i.src='https://hubspot-data-forwarder.example.com/?' + $.param(data);
document.body.appendChild(i);
});

That way the Hubspot Javascript can't interfere with our page.

It's not perfect but mostly does what we want. The links you get in Hubspot don't work, but that could be fixed by adding a URL forwarding to the Caddy config.

Now, of course it would be much preferred if Hubspot could provide:

* Easy-to-use tracking pixels for page views

* An API that allows to do everything from our backend and not just events

Well maybe some day.

View solution in original post

davidgubler · ‎Jun 8, 2020

In case anyone stumbles over this, we've set up a Caddy (simple web server) in Kubernetes on a special domain (hubspot-data-forwarder.example.com) with the following configuration:

{
http_port 8080
admin off
}

http://hubspot-data-forwarder.example.com {
respond /healthz "OK" 200
header Cache-Control no-cache

respond / "<!DOCTYPE html>
<html>
<head>
<script src='https://js.hs-scripts.com/YOUR-HUBSPOT-TRACKING-ID-INSERT-HERE.js'></script>
<script>
var params = {};
for(let entry of (new URLSearchParams(window.location.search)).entries()) {
const [key, value] = entry;
params[key] = value;
}
var _hsq = window._hsq = window._hsq || [];
if (params['url']) {
var url = params['url'].replace(/^https?\:\/\//i, '');
url = url.split('?')[0];
document.title = url;
url = '/r/' + url;
_hsq.push(['setPath', url]);
delete params['url'];
}
if (params['email']) {
_hsq.push(['identify', params]);
}
</script>
</head>
</html>" 200
header Cache-Control no-cache
header Content-Type "text/html; charset=UTF-8"
}

Now whenever we want to track something we can embed a hidden iframe into the page, like this:

$(document).ready(function () {
var data = $('script#hubspot').data();
data['url'] = window.location.href;
var i = document.createElement('iframe');
i.style.display = 'none';
i.src='https://hubspot-data-forwarder.example.com/?' + $.param(data);
document.body.appendChild(i);
});

That way the Hubspot Javascript can't interfere with our page.

It's not perfect but mostly does what we want. The links you get in Hubspot don't work, but that could be fixed by adding a URL forwarding to the Caddy config.

Now, of course it would be much preferred if Hubspot could provide:

* Easy-to-use tracking pixels for page views

* An API that allows to do everything from our backend and not just events

Well maybe some day.

Willson · ‎May 28, 2020

Hey @davidgubler

Just to confirm, you've reviewed our Track page views endpoint which is called when the tracking code is loaded on a page, but you can also manually call this function to track subsequent views too.

See our documentation here. We can see that once you're able to identify a customer, you can use the following code to manually track a page view:

var _hsq = window._hsq = window._hsq || [];
// Track the page view for the new page
_hsq.push(['trackPageView']);

I hope this helps!

Product Manager @ HubSpot

davidgubler · ‎May 29, 2020

Hi Matthew,

I understand that, but it requires using the Hubspot Javascript, which we don't want to do.

I'm looking for a way to generate pageView events without using the Hubspot Javascript, like it is possible for events.

Best regards,

David

Willson · ‎May 29, 2020

Hi @davidgubler

Thanks for the clarification here! To confirm, in this case we do not have any functionality currently outside of what you have already utilised.

Thanks!

Product Manager @ HubSpot

APIs & Integrations