topic Use hutk to identify visitor in tracking code in CMS Development

Use hutk to identify visitor in tracking code

AWilliamson29 — Mon, 21 Nov 2022 23:23:36 GMT

I am trying to implement a solution where I have an embedded app in an iframe. I want to track using the tracking code. However, since rules are strict iframes cannot access the cookies stored by hubspot in the parent site.

I am passing __hstc __hssc and __hsfp through url params into the iframe, but I need to somehow use the identify function to link a contact to this session info.

Re: Use hutk to identify visitor in tracking code

Jaycee_Lewis — Tue, 22 Nov 2022 17:45:49 GMT

Hi, @AWilliamson29 👋 Thanks for reaching out. Let's see if we can get the converstaion going — hey @LMeert @ChrisoKlepke @assi do you have any experience with the type of project @AWilliamson29 is describing?

Thank you! — Jaycee

Re: Use hutk to identify visitor in tracking code

AWilliamson29 — Tue, 22 Nov 2022 19:53:28 GMT

This might fill in some of the gaps.

We have a use case where we are embedding our app inside our client’s website. They want so integrate their tracking code with the embedded iframe and gate it with a hubspot form. Iframe security doesn’t allow the iframe to access the cookies from the parent site so form submissions were showing up without a cookie and page views were coming through as anonymous. I passed through the cross domain tracking params from the parent site to the iframe and submitted the form with the parent hutk attached.

 // parent site embed code for the iframe
<script>
  var _hsq = window._hsq = window._hsq || [];
  var crossDomainTrackingParams = "";
  _hsq.push(['addIdentityListener', function(hstc, hssc, hsfp) {
    crossDomainTrackingParams = '?__hstc=' + hstc + '&__hssc=' + hssc + '&__hsfp=' + hsfp;
    var link = "https://hypothetical-link.dev/" + crossDomainTrackingParams;
    console.log(link);
    document.getElementById("my-iframe").src=encodeURI(link);
  }]);
</script>
  
// Form creation code within the iframe (parsed out the hutk on the backend and passed it to the template)
hbspt.forms.create({
  portalId: "{{hubspot_portal_id}}",
  formId: "{{hubspot_form_id}}",
  target: "#form_{{hubspot_form_id}}",
  hutk: "{{hutk}}",
  onFormSubmitted: function($form, ctx) {
    const button = document.getElementById("submitButton");
    button.click();
    return false;
  }
});

This was able to link the form submission with the parent page view via passing through the hutk. However I am trying to leverage the hutk to identify the page view event with something like _hsq.push(["identify", {hutk: hutk}]) but i’m noticing that the vi param is not changing in the network call, nor is the i:hutk=<hutk-id> tying the page views to the contact generated by the form.Is there something I can use to tie the session data to the contact via the "identify" function and the hutk or otherwise?

Re: Use hutk to identify visitor in tracking code

AWilliamson29 — Mon, 28 Nov 2022 18:07:53 GMT

Hi @Jaycee_Lewis, I'm still stuck on this. Let me know if there's anybody who can unblock this effort.

Re: Use hutk to identify visitor in tracking code

kevinfilteau — Fri, 14 Apr 2023 00:46:29 GMT

Just an idea to try, postMessage from the parent to iframe ?

Re: Use hutk to identify visitor in tracking code

kevinfilteau — Fri, 14 Apr 2023 00:47:26 GMT

Or add params to iframe url ?