APIs & Integrations

mflorence99
Member

Hubspotutk cookie in Angular 7 App

Hi -- HS support directed me here. I hope someone can help!

We are embedding the HS tracking code in our Angular 7 app. According to the docs, we need the hubspotutk cookie to be set in order for the identity of the user to be established. But we don't understand how that cookie is set for our domain from the CTA links in the marketing email we use to drive users to the app.

Does anyone have any insight? Alternatively, is it possible to append an &email= parameter to the CTA link so that we can call the identify function in our code?

Here is the HS tracking code in our index.html:

    <script>
      var _hsq = window._hsq = window._hsq || [];
      // @see https://developers.hubspot.com/docs/methods/tracking_code_api/tracking_code_overview
      _hsq.push(['setPath', '/home']);
    </script>  
    <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/1859609.js">
    </script>

Many thanks!

0 Upvotes
31 Replies 31
cbarley
HubSpot Alumni
HubSpot Alumni

Hubspotutk cookie in Angular 7 App

Hey @mflorence99 :wave:,

I would expect any domain that has your tracking code on it to work, as long as it is listed here: https://app.hubspot.com/settings/1859609/analytics-and-tracking/domains

0 Upvotes
mflorence99
Member

Hubspotutk cookie in Angular 7 App

Hi @Connor_Barley -- clearly the send test email feature didn't work as I expected! So I created a test contact and sent an email to its inbox, as you suggested and registered page hits as expected now.

However, I could not replicate that behavior in test mode, from my dev machine, using localhost as the domain. Would you expect that to work? If I use the identify function, localhost works just fine to register page hits.

Many thanks!

0 Upvotes
mflorence99
Member

Hubspotutk cookie in Angular 7 App

OK @Connor_Barley now we are getting somewhere. I don't have the magic app that decodes the _hsenc -- but how on earth do I get an email sent to me on behalf of a third party so I can test?

What does it mean in the test send "receive on behalf of" if the CTA link isn't to that person?

0 Upvotes
cbarley
HubSpot Alumni
HubSpot Alumni

Hubspotutk cookie in Angular 7 App

Hey @mflorence99, if you have some sort of personal or alternate email address, what you can do is create a new contact in your portal like my test ones, send a test to that address (dont need to specify which contact you're viewing as), then follow your same steps to make sure you get a page view. You can't test on behalf of somebody, but you can test your own contact records. Your IP doesn't fall under the ones excluded here: https://app.hubspot.com/settings/1859609/analytics-and-tracking/domains but I usually test on a VPN to make 100% sure that I am an anonymous visitor or that my cookie isn't somehow associated with another contact in my hubspot account.

0 Upvotes
cbarley
HubSpot Alumni
HubSpot Alumni

Hubspotutk cookie in Angular 7 App

Hi @mflorence99, just did your test by sending a test email and previewing as Liz Perry. Is this what you're wanting me to to do a la -- http://prntscr.com/lqr3x3? If so, that doesn't work as the _hsenc parameter, if you decode it, is still the receivers email address. You can see this here:

This was after I sent the email to myself previewing as Liz Perry > copied the URL, opened the Network tab, confirmed a ptq event, and checked Liz Perry's contact timeline. More page views showed on mine: https://app.hubspot.com/contacts/1859609/contact/15198451/?interaction=note

0 Upvotes
mflorence99
Member

Hubspotutk cookie in Angular 7 App

@Connor_Barley That's great but maybe you have a cookie left over from when you were running against your test app.

Why don't you run my test? If it works for you, but not for me, then we can look at what might be different.

0 Upvotes
mflorence99
Member

Hubspotutk cookie in Angular 7 App

@Connor_Barley I have not yet balked at any of the tests you've asked me to run, but this one is a step too far. Do you mean that all our users must use a VPN via Opera to get page tracking? Surely not.

Show me the config setting on our account first that filters by IP. Then we can see if my IP is being filtered. I just ran whoami.com and my IP is 173.209.111.70.

Have you run the exact same test as me? Send this email https://app.hubspot.com/email/1859609/details/6406760335/recipients/clicked to yourself on behalf of Liz Perry. Copy the CTA link and paste into a browser with the Network tab showing. Observe if any page view activity on https://app.hubspot.com/contacts/1859609/contact/5394701/?interaction=note (Liz Perry).

0 Upvotes
cbarley
HubSpot Alumni
HubSpot Alumni

Hubspotutk cookie in Angular 7 App

hi @mflorence99, I understand the frustration and I really appreciate the timely alterations you've made to your app so we can test. I just tested my contact and I have more page views: https://app.hubspot.com/contacts/1859609/contact/15198451/?interaction=note

0 Upvotes
mflorence99
Member

Hubspotutk cookie in Angular 7 App

I'm sorry @Connor_Barley we're still going nowhere. None of that helps because I can't repro your results.

I just tried again. I sent this email https://app.hubspot.com/email/1859609/details/6406760335/recipients/clicked to me on behalf of contact Liz Perry. No page view information is observed, yet the po parameter is formatted just as you wanted.

Nothing whatsoever solved. Perhaps you still have cookies set from when you were using your test application, not mine. I can only repeat: it does not work.

How do we escalate this problem?

0 Upvotes
cbarley
HubSpot Alumni
HubSpot Alumni

Hubspotutk cookie in Angular 7 App

@mflorence99, can you please conduct your tests on a VPN such as through the Opera browser? IP filtering could be causing an issue.

0 Upvotes
cbarley
HubSpot Alumni
HubSpot Alumni

Hubspotutk cookie in Angular 7 App

Hi @mflorence99, I totally feel your pain here, this has been a long and arduous journey. I'll be your best point of contact as I'm speaking directly with our product team and partnering with other folks internally. I think the issue is a conglomerate of compounding factors that have made it confusing to follow properly as well as troubleshoot.

First and foremost, I think there's a definite flaw in the documentation on this method. We're working currently on an audit of all of our docs and this one will be at the top of the list.

  1. I believe there's nothing in the docs aside from a small example in the right-hand side here: https://developers.hubspot.com/docs/methods/tracking_code_api/set_page_path.
  2. The way it works is that the tracking code sets a cookie in a user's browser. A page view activity gets recorded by the tracking code (ptq) and sent to our tracking servers. The activity includes a field with the cookie value (vi). If that cookie matches a usertoken that's associated already with a contact record, that view gets associated with that contact and appears on their timeline. The way the browser cookie and contact record would get associated is when a page view happens on a URL that includes _hsenc, that view activity tells HubSpot to associate the vi cookie value on that activity with the contact whose email address the _hsenc value decodes to. So if we get a view activity and the URL (pulled from the po param in your case) includes the _hsenc parameter, we will decode it, find that vid, and then if the cookie on that activity is not already associated with that vid (or with any other vid) we will associate it. The issue was that since the _hsenc parameter was not being sent in the po parameter, we couldn't make the association. a page view was being recorded, but since nothing had happened to associate the browser cookie with my contact record the views couldn't be associated with it.

Currently, because your po field is property formatted, I'm getting page views on my contact: https://app.hubspot.com/contacts/1859609/contact/15198451/?interaction=note. Same thing for my colleague: https://app.hubspot.com/contacts/1859609/contact/15534101/?interaction=note. Setting the path with query strings included looks to have solved the issue.

0 Upvotes
mflorence99
Member

Hubspotutk cookie in Angular 7 App

Hi @Connor_Barley -- I tried what you suggested but could not repro your results. I have rebuilt and redeployed our Angular 7 SPA to append the query parameters to the setPath as you requested and as you can see in the attached screenshot. You can see the po parameter formatted like you did in the call to the https://track.hubspot.com/__ptq.gif endpoint.

TBH, this approach doesn't make sense on at least three counts:

  1. There's nothing in the docs that says anything about formatting the setPath in this way. If in fact it were so, every HS customer that used an SPA would fail in the same way.

  2. Surely it doesn't make any sense for the https://track.hubspot.com/__ptq.gif endpoint to have to decode and reinterpret the _hsenc parameter when it has already been done by the tracking code? That's where the a and vl parameters come from, for example.

  3. If this approach were necessary, why bother with the hubspotutk cookie at all? It plays no role in the scenario you outlined. Rather, as I have shown, the value of the hubspotutk token is echoed in the vl parameter. The problem is that no page views are recorded.

Is it time for a new approach? We've been battling this problem for 3 weeks. We've paid for Enterprise support. The marketing people are not happy at all because they can't send a mass mailing without this tracking info working. What do I do to escalate the problem? I'm fully prepared to believe I'm doing something wrong. But it isn't in the docs and no one can tell me what it is.

0 Upvotes
cbarley
HubSpot Alumni
HubSpot Alumni

Hubspotutk cookie in Angular 7 App

hey @mflorence99 alright I am sure we are getting very close. I just tested the following in my own portal and could actively reproduce the behavior you are seeing. I went to a webpage of mine, and added the following code:

<script>
   var _hsq = window._hsq = window._hsq || [];
   _hsq.push(["setPath", "/splash"])
</script>

I then went through the same flow that your customers went through by sending myself an email that linked to the page that should be tracking views. I confirmed that the tracking code fired and registered a page view event by checking the call to the _ptq link, with a k value of 1 (page view), then put the _hsenc param into a decoder and confirmed that it was my email address that was being decoded. Here's what my Network tab looked like when checking out the ptq link:

You can see that po is set to /splash, which is what I manually set. This did not record any page view activities onto my contact record in HubSpot. I then manually added in those query parameters to the setPath function like this:

<script>
	var _hsq = window._hsq = window._hsq || [];
	_hsq.push(['setPath', '/splash?utm_source=hs_email&utm_medium=email&utm_content=2&_hsenc=p2ANqtz-_DkWbWKxp-hfB-TbAXP7GHqGwOlLxZwBj92yJsF5h6ljoRwCHt29rl0Jr3F9bXYy4oGoLUmP1knZM4S-15iLlN3y4K7w&_hsmi=2'])
</script> 

and was able to get page views!

Here's what my network tab looked like:

If you add in the query params during your setPath function, this should work. At the moment, I'm seeing that po on your page is set to /main. I'd recommend making sure to set it to the URL you'd like with all your UTM parameters (in hubspot they'll just get stripped out when viewing a contact record so it won't show a long string), or just don't call the setPath function on the initial page load, so that the initial tracking will default to the normal URL.

0 Upvotes
mflorence99
Member

Hubspotutk cookie in Angular 7 App

@Connor_Barley I rebuilt and redeployed without the initial setPath as you suggested, but it made no difference.

0 Upvotes
cbarley
HubSpot Alumni
HubSpot Alumni

Hubspotutk cookie in Angular 7 App

Hey @mflorence99, it's late and haven't tried looking into your reply fully yet, but can you try removing any setPath call? If you're setting the path manually, I believe those query parameters have to be included. If you aren't setting the page path manually, the query parameters will be included automatically when the page loads, but if you do set it manually, those parameters are left off since the tracking code uses your manual call over the actual URL. This could very well be what's happening here. Can you try removing that call to setPath?

0 Upvotes
mflorence99
Member

Hubspotutk cookie in Angular 7 App

I will try that first thing @connor_barley but please take a look at my note tomorrow as I am not sure we are on the right track. Plus your theory would not explain why the setPath works perfectly - if I call identify first with an email address. And in that case none of the URL parameters are present.

0 Upvotes
cbarley
HubSpot Alumni
HubSpot Alumni

Hubspotutk cookie in Angular 7 App

Got it. The identify function works because you're manually setting the path and explicitly identifying the contact. You shouldn't need that, though since you're sending an email to contacts who click a CTA to get to the SPA. The tracking code should know the identity of the contact and should therefore be recording page views. Ill look for a reply tomorrow from you.

0 Upvotes
mflorence99
Member

Hubspotutk cookie in Angular 7 App

Hi @Connor_Barley -- thank you very much again for all your help. I am very sorry this is so painful. Please let me know what I can do to make it easier! Sadly though it is still not working.

I rebuilt and redeployed our Angular 7 SPA to use URL paths rather than fragments for routing, to avoid any of the issues that you raised. However, page view activity was still not observed. I have attached a screenshot to show the state of play at the time the request to https://track.hubspot.com/__ptq.gif was issued. You can see that the URL is formatted as you suggested.

I also question your theory that the URL was the culprit in the first place. Surely the _hsenc parameter has been decoded parsed already -- by the client-side tracking code and before the __ptq.gif call is made. That's how the a parameter is populated with our site ID and the vl parameter with the value of the hubspotutk cookie. The original URL is passed in the pu parameter but sure only to be recorded and not for the its query parameters to be further parsed. In any event, even when formatted without a # bookmark, the code still does not work.

0 Upvotes
cbarley
HubSpot Alumni
HubSpot Alumni

Hubspotutk cookie in Angular 7 App

Hi @mflorence99, I sat down with a member of the product team and went over step by step walking through each step of the process to make sure we didn't miss anything. Here's what we did:

  1. Sent this email: https://app.hubspot.com/email/1859609/details/6642184476/performance, to myself.
  2. To make sure my IP address didn't get filtered since I was on HubSpot's corporate network, I used Opera and a VPN to visit your SPA. I saw the query parameters in the URL and in the Network tab this time - I must have been refreshing the page when I responded last, as when I do that in your SPA, the query params get removed.
  3. Continuing on, I do see a call to the https://track.hubspot.com/__ptq.gif URL with a k value = to 1 which is a page view. This means that the page is getting tracked, but when we go to my contact again, there's no data as we've seen. Looking further at that ptq event, it looks to be pushing this URL to the tracking code to be tracked: https://admin.appcast.cloud/recruitment-marketing-grader/home#/benchmark?utm_campaign=Campaign%2520-%2520Whitepaper%253A%2520Job%2520Description%2520%2526%2520Titles%2520&utm_medium=email&_hsenc=p2ANqtz-8NoRKNlFN57toJAvPuD6KkoUbbVG3eCOBIgeIKwqELPJmybuKbIRLSb4L8HNtDYRu4ewAc4y3ncAzfryUlkKUHiKgw4A&_hsmi=67889066&utm_content=67889066&utm_source=hs_email&hsCtaTracking=ef04a87c-7b99-4931-bfad-23b5e7c3e959%257C85d5cda6-7c78-4a77-b371-be5a9d24ea27.
  4. Putting the hsenc value into an internal decoding tool returned my own email address:

So we know that the event for tracking page views is being fired, and my email address is property included in the URL, so the only thing that this might point to is the order in which the URL shows up as, specifically, where the URL fragment/hash is.

When I use an internal tool that runs on the same service that we use to actually bucket URL's for page views on your SPA's URL, I get an incorrect bucketing:

Your URL is getting bucketed as Direct Traffic, without it picking up on any query parameters as you can see from the urlParams parameter.

When I remove the # entirely from the URL, we get the correct bucketing:

This points to the fact that the issue lies in the URL and where the # is getting placed. As a matter of fact, it looks like in RFC 3986 here: https://tools.ietf.org/html/rfc3986#section-4.1, that the structure of URLs have to be query parameter > then hash, rather than the other way around.

I'd recommend testing to see if moving the fragment to the end of the URL fixes the issue, as we think that this is the root cause.

0 Upvotes
mflorence99
Member

Hubspotutk cookie in Angular 7 App

Hi @Connor_Barley -- many thanks again for your help, but I'm afraid we are still at a dead end. Our redirect does not strip out any of the HS query parameters. We could see that from the notes I published in this thread on 11/17.

To try to show that, I just sent this test email to myself: https://app.hubspot.com/email/1859609/details/6406760335/recipients/clicked on behalf of this contact (just picked arbitrarily): https://app.hubspot.com/contacts/1859609/contact/7083351?interaction=note. I follow the CTA link in the test email and no page view activity is being recorded for that user.

To show that the query parameters are not being stripped, I used Chrome with the debugger activated to launch the CTA link. In the debugger Network tab, I set the "preserve log" checkbox. I hope you can see from the two attached screenshots that the _hsenc and all other query parameters are preserved in the redirect.

You or your team should be able to trace identical results.

PLEASE HELP! It may well be we are doing something wrong, but the marketing team is getting very concerned about making this work.

How can we escalate this issue to drive it to a solution?

ADDITIONAL NOTE: In the Chrome debugger, I can see hubspotutk being set in document.cookie. I can also see a tracking request to https://track.hubspot.com/__ptq.gif issued. In the URL, the &vl= query parameter is set to the same value as the cookie. But if I use the http://api.hubapi.com/contacts/v1/contact/utk/xxxx?hapikey=xxxx API to lookup the contact from the token, I get a 'new contact' page and not the intended contact.

0 Upvotes