Trying to get Original Source populated with custom form

Developer Support APIs & Integrations
, ,
1

Hey,

I need some help or guidance with the form Im implementing accross the website, I’ve made a custom form and Im populating the fields via ajax.

It seems that all form fields are populated and all works good except, I cant manage to track the users Original Source to see his browser history (Contact Created+Page View).
Im trying to get all field via front end only with jquery!

 var form = $(this);
 var data = $(this).serializeArray();
 var url = form.attr('action');
 var hubsptCookie = getNewCookie('hubspotutk');
 data.push( 
 {"hs_context": 
 {
 "hutk": hubsptCookie,"pageUri": window.location.href,"pageName": document.title
 }});
 console.log(data);
 $.ajax({
 type: "POST",
 url: url,
 data: $.param(data), // serializes the form's elements.
 success: function(data) {
 }
 });

Can any one help? Need to know what Im missing or doing wrong!

Im getting: This contact was created from Direct Traffic from Unknown URL
in original source

2

Hi, @z3r0.

It looks like you are not passing the hubspotutk cookie correctly in your payload. This will cause contacts to have the Original Source value “Direct Traffic” every time.

The v3 Forms API documentation states that the hutk field must be included in a context object, not an object named hs_context. (The hs_context object is used in the now-deprecated v2 Forms API.)

3

Thanks for the response,
I think I’ve changed the hs_context to context and still didnt get the result, if Im passing the context like I did I should get the fields populated?

 var data = $(this).serializeArray();
 var url = form.attr('action');
 var hubsptCookie = getNewCookie('hubspotutk');
 data.push( 
 {"context": 
 {
 "hutk": hubsptCookie,"pageUri": window.location.href,"pageName": document.title
 }});
 console.log(data);
 $.ajax({
 type: "POST",
 url: url,
 data: $.param(data),
 success: function(data) {
 }
 })

And still nothing happends, I need to see the page views, that generaly should populate these fields?!

4

Hey again, tested it again and I still get: “This contact was created from Direct Traffic from Unknown URL”, I am moving the “hubspotutk” number with the cookie and the current url of the page and nothing happends.
I get no page views (event though Im comming from paid ad without changing urls, only by clicking links).
It feels like something is off, either the object Im sending or something I cant understant fully…
In console log I get the right object, exactly as it is documented and yet nothing.
P.S: another thing that I know of is that the non-hubspot forms are off (any implications if its off?), this option is off because I dont need hubspot to send forms when a user is registering to the product, need hubspot just to collect business leads from specific forms.
If You need me to provide more code like HTML of the form or url of the page (prefer it to be private) I can provide it.

5

Hi, @z3r0.

Thanks for the detailed reply.

At a glance, I believe that JavaScript would create the proper payload and make a successful request. Even if you are passing the hutk correctly, however, there can be other factors that cause a contact to be bucketed under “Direct Traffic,” such as testing on a filtered IP. To avoid this, I usually test in Opera using its built-in VPN mode.

Disabling non-HubSpot forms should not affect this behavior since you are submitting to a HubSpot form.

Would you actually mind sharing a link to the example contact you created? I can troubleshoot the issue from the record.

6

Hey @IsaacTakushi ,
Thats the contact I’ve created: HubSpot, if You need the form page:

www.powtoon.com/lp/remote-world/?term=npro

Its a live form (2 dynamic once on the page).

Still cant figure it out, thanks in advance!

7

Hi, @z3r0.

Thanks for providing all this information. That contact record appears to have been deleted, though. Would you mind providing another example? With your permission, I can also restore that contact to investigate.

8

Yes @IsaacTakushi ,

You have my permission to restore it, I guess the sales team deleted it by mistake (told them not to).
Just tell Me what else You need Me to provide You with!

I just restored the contact, sorry, wont happen again untill we finish the investigation!

9

Hi, @z3r0.

Thanks for confirming!

Looking at that contact, though, I don’t see any hubspotutk values passed with the form submission. That is the immediate cause of why HubSpot defaults to “Direct Traffic.”

Would you be able to share an example payload which your code produces? All of the other contact properties appear to be submitted correctly, so I think the hs_context object may be improperly encoded.

Taking another look at the code you shared, it looks like you are including hs_context as a field within another object:

{
	"hs_context":{
		"hutk":"hubsptCookie",
		"pageUri":"window.location.href",
		"pageName":"document.title"
	}
}

when it should just be:

{
 "hutk":"hubsptCookie",
 "pageUri":"window.location.href",
 "pageName":"document.title"
}

For those who may read this post later, the deprecated v2 Forms API endpoint has a urlencoded body like this:

firstname=TestContact&lastname=FormSub&email=formsub@hubspot.com&newcustomproperty=testing&hs_context=%7B%22hutk%22%3A%2260c2ccdfe4892f0fa0593940b12c11aa%22%2C%22ipAddress%22%3A%22192.168.1.12%22%2C%22pageUrl%22%3A%22http%3A%2F%2Fdemo.hubapi.com%2Fcontact%2F%22%2C%22pageName%22%3A%22Contact%2BUs%22%2C%22redirectUrl%22%3A%22http%3A%2F%2Fdemo.hubapi.com%2Fthank-you%2F%22%7D

where an hs_context parameter containing an object like:

{
 "hutk": "60c2ccdfe4892f0fa0593940b12c11aa", 
 "ipAddress": "192.168.1.12", 
 "pageUrl": "http://demo.hubapi.com/contact/", 
 "pageName": "Contact Us", 
 "redirectUrl": "http://demo.hubapi.com/thank-you/" 
}

is encoded as:

hs_context%3D%7B%22hutk%22%3A%2260c2ccdfe4892f0fa0593940b12c11aa%22%2C%22ipAddress%22%3A%22192.168.1.12%22%2C%22pageUrl%22%3A%22http%3A%2F%2Fdemo.hubapi.com%2Fcontact%2F%22%2C%22pageName%22%3A%22Contact%2BUs%22%2C%22redirectUrl%22%3A%22http%3A%2F%2Fdemo.hubapi.com%2Fthank-you%2F%22%7D

10

Hey @IsaacTakushi ,

Thanks for the response, so I need to implement another field named context (via v3 api), and pass an object to the input with the object?

“hutk”: hubsptCookie,
“pageUri”: window.location.href,
“pageName”: document.title

I’ve added a new array object and I need to just add an object or how does it exactly work?!

Or do I just need to add an object to be sent with the form?!

I meen the fields name should be = context and value to the above?

28063i38B3AF1AC2B1DB45.png
28063i38B3AF1AC2B1DB45.png755×438 32.3 KB

This is what I get when I log the array, should I add this to another hidden field in the form and just set the value as a new object with hutk…?!

11

Hey @IsaacTakushi ,
I’ve managed to get the page view info but still get “This contact was created from Direct Traffic from Unknown URL”
The user came from a ppc campaign via google, why cant I integrate this info? (thats the only info missing for me)

28170iB1317AE72D95C031.png
28170iB1317AE72D95C031.png998×563 100 KB

Thanks in advance!

12

Hi, @z3r0.

Apologies for the delayed response.

I see that you marked my last response as the solution. Did you resolve the issues you were experiencing?

13

Hey @IsaacTakushi ,

Well, I marked it eventhough it was strange, the only thing I was missing is setting and input named hs_context and passing there the strigified parameters of the hutk+url+pageName, I’ve never seen something that takes an input value with strings and uriencodes it to data, ow how surprised I was…
In any way, yes the drill down did help, and I managed to pass all info, page views and all cookie info comming from hubspot, thanks for the help!!!

14

So glad to hear it, @z3r0.

Yes, the v2 Forms API can be interesting to work with!

The newer v3 Forms API is a bit more straightforward, as it supports JSON payloads. With this API, a context object replaces the hs_context parameter:

 "context": {
 "hutk": ":hutk",
 "pageUri": "www.example.com/page",
 "pageName": "Example page"
 }