Use hutk to identify visitor in tracking code

Develop, Build & Integrate CMS Development
1

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.

2

Hi, @AWilliamson29 :waving_hand: 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

3

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

4

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?

5

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

6

Or add params to iframe url ?