CMS Development

AWilliamson29
Member

Use hutk to identify visitor in tracking code

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.

0 Upvotes
5 Replies 5
AWilliamson29
Member

Use hutk to identify visitor in tracking code

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?
0 Upvotes
kevinfilteau
Participant

Use hutk to identify visitor in tracking code

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

0 Upvotes
kevinfilteau
Participant

Use hutk to identify visitor in tracking code

Or add params to iframe url ?

0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

Use hutk to identify visitor in tracking code

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

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes
AWilliamson29
Member

Use hutk to identify visitor in tracking code

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

0 Upvotes