Having problems understanding javascript API and _hsq.push()

esivertsen · ‎Mar 21, 2017

Hey guys!
This is my first post in this forum - which I was happy to find, BTW.
It represent my highest hope so far of solving the following problem:
Attributing downloads of particular resources (software/files) from my website, to the contacts that perform them.

The problem is I am a bit of a noob when it comes to this.
So I admit I am not entirely sure what I’m doing.

My first approach was to insert javascript into my webpage header, and make Google Analytics count clicks on download links, as events:

jQuery(document).ready(function(){
jQuery(‘a[href*="/download_resource/"]’).on(‘click’,function(){
var href = jQuery(this).attr(“href”);
_gaq.push([’_trackEvent’, ‘TrackLink’, ‘Download’, href]);
});
});

As you can see, it matches a certain URL pattern which ALL file downloads have, then pushes an event to GA that includes the entire href, including some codes that identify the download file. And this part actually works. The hrefs are passed on to GA as event labels. I can then filter using regexp and count the downloads.

But the next step is to attribute a particular download, to Hubspot contacts.

Hubspot is already tracking pageviews.
So I thought I’d add an _hsq() call to the jQuery code above:

jQuery(document).ready(function(){
jQuery(‘a[href*="/nordic/download_resource/"]’).on(‘click’,function(){
var href = jQuery(this).attr(“href”);
_gaq.push([’_trackEvent’, ‘TrackLink’, ‘Download’, href]);
    _hsq.push(["trackEvent", {
        id: "DOWNLOAD_EVENT_ID", 
        value: href
    }]);            
});
});

This is from an example of the HS javascript API that I found.

Questions and concerns:

I am not sure how to test that this script is working on the client side.
Inserting the _hsq snippet() into the live server is cumbersome, and I have to ask a 3rd party to do it.
Testing on a local copy, I get errors probably related to that the HS pixel can’t be request via a file:// protocol request:

track.hubspot.com/__ptq.gif?id=DOWNLOAD_EVENT_ID&value=http%3A%2F%2Fwww.nor…ICONDUCTOR&cts=149013806... GET file://track.hubspot.com/__ptq.gif?id=DOWNLOAD_EVENT_ID&value=http%3A%2F%2F…EMICONDUCTOR&cts=1490138063516&vi=1bc8cae934382623961d445d49bf2271&nc=true net::ERR_FILE_NOT_FOUND
XMLHttpRequest cannot load file://googleads.g.doubleclick.net/pagead/id. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Testing on a local AMP stack (Apache/MySQL/PHP) server gives all sorts of other problems.

Any suggestions how I can test this?
Or is it possible to say straight away whether it will work or not?

Once I actually manage to get this script trigger a Hubspot event:
How do I proceed to record this particular event in Hubspot?
I mean, how do I set it up on the Hubspot side.

I have tried using the Bookmarklet.
I have tried trigging HS events with various DOM identifiers (Id/class etc).
But I can’t get it to work. There is, of course, a certain lack of knowledge here.
But I am hoping at least someone here can help me shed light on some parts of this.

Cheers and thanks!
Eivind

esivertsen · ‎May 2, 2017

Hi again guys,
sorry for dragging this out after so much time but I had a leave of absent due to illness in my family.

Anyways; meanwhile this code snippet was lying there, and tracked absolutely nothing

// ADDED JQuery DL-click qualifier and counter
jQuery(document).ready(function(){

jQuery('a[href*="/download_resource/"]').on('click',function(){
var href = jQuery(this).attr("href");
_gaq.push(['_trackEvent', 'TrackLink', 'Download', href]);

// ADDED HS event
var start = href.lastIndexOf("/") + 1;
var len = href.indexOf("?", start) - start;
var obj = href.substr(start, len);
if(obj == "32925" || obj == "116085")
_hsq.push(["trackEvent",
{id: "000002000821"}

]);

});//end OnClick
});// end doc ready

The GA part is counting download clicks as it should.
But on the Hubspot side, nothing. As you can see, I’m trying to trig an event with ID 000002000821 that I created in Hubspot. I tested the conditional block, and it triggers on the two right strings 32925 and 116085.

I also tried to include the HS part of this code in the custom js window inside the HS interface for the event. Did not help. So I took it away again.

I’ve also tried the HTTP API link that is generated for the event, and called that.
I saw the nice little pixel, but still, the event counter did not increment.

I dont think the API is broken, it’s just that I dont understand this well enough to make it work for me.

Can anyone point out some obvious mistakes?
Do I need to pay for HS tech services to get this working?
I am not sure this forum is actually an official HS support resource, but that was my impression when I first got here since I was directed by HS support…

Thanks + cheers;
Eivind

Dadams · ‎Mar 22, 2017

Hi @esivertsen

Our tracking code isn’t designed to work with a static HTML file loading locally (from the file:/// protocol), but there shouldn’t be any problems loading the code from a local AMP stack (or any other local development environment). Can you share more details about the errors? As far as testing the event, you’d just need to look for that call to track.hubspot.com to fire when you trigger the event (even without the event, you’ll see at least one request to that to track the page view).

For creating the events, you have two main options. First, you can manually create the event in HubSpot. More details on that here:

How do I create events in HubSpot?

An event is a feature available for Marketing Enterprise HubSpot customers that allows you to track when a user performs a specific action on your website.

You’d need to use custom event as the event type, and then use the numerical ID of that event to track the event on your page.

Second, you can use your code to dynamically create the event by triggering the event with a unique name, and we’ll automatically create a new event in HubSpot the first time we track an event with that name.

More details about creating events by name can be found here:
http://developers.hubspot.com/docs/methods/tracking_code_api/tracking_code_overview#idsandnames

esivertsen · ‎Mar 30, 2017

Hi dadams,

finally got some time to look at this. Life is hard!
The example from your first example URL above, in which a custom event is given a custom javascript:

_hsq.push(["trackEvent", {
    id: "000002000821",
    value: nulll
    }]);

This is something you would use to trigger an event every time a page you’re tracking with HubSpot, would load. Right?

It would be nice if I could enter my kind of jQuery script, triggered by an OnClick after page load:

jQuery(document).ready(function(){
    jQuery('a[href*="/download_object/"]').on('click',function(){
        var href = jQuery(this).attr("href"); 
        _gaq.push(['_trackEvent', 'TrackLink', 'Download', href]);            
           
        // HS event
        var start = href.lastIndexOf("/") + 1;
        var len = href.indexOf("?", start) - start;
        var obj = href.substr(start, len);    
        if(obj == "this_object" || obj == "that_object")
            _hsq.push(["trackEvent", {id: "000001234567"}]);            
    });
});

As you can see, I have some conditions on which downloads that fire the event call.
If I could do this from the HubSpot interface, it would be much easier to update the code according to which downloads are most important to track (we dont have direct access to the source code).

That would also allow the GA script to piggyback
Thing is, our HubSpot tracking code is very near the end, so I am not sure this will work?

</footer>

Dadams · ‎Mar 30, 2017

If you’re creating a custom event in HubSpot, anything entered into the Customize Javascript box will be executed as part of your tracking code, so you would be able to add your jQuery code to that box to have it run on every page (assuming that you’re loading jQuery before the tracking code, which will generally be the case since the tracking code should be one of the last things on the page).

esivertsen · ‎Apr 6, 2017

OK, I’m trying this approach now:
All code I shown earlier, is now inside the custom event javascript box.
Have not gotten any data so far (1-2hrs) but will keep it like this until the morning.

I’m not sure about it though, since this code does not get injected to the page.
So: The Hubspot tracking code is run whenever encountered, but how can an onClick-triggered event work in this context?

Does my code live in the DOM even though it’s not included in clear text in the document?

Cheers
Eivind

esivertsen · ‎Mar 23, 2017

Hey @dadams!
Wow,
thanks for the reply!
I’ll need a few days to look into this.

I have another Question though:
Will this method attribute the click to the correct contact? (if there’s a cookie etc / this is an existing contact).

Thanks and best regards;
Eivind

Dadams · ‎Mar 23, 2017

Any events triggered with the JavaScript API will automatically be associated with the visitor, so if the visitor is a known contact record then yes, the event will be associated with the contact record.

APIs & Integrations