Skip to main content
Question

User recognition in iFrames

  • 16 May 2024
  • 2 replies
  • 125 views

Hey Amplitude!

I have a question related to setting up the tracking for widgets (iFrames) that are part of our Direct Booking Solution. A bit more context: Tour operators can embed our widgets on their websites as iFrames. Some examples are Tiddly Travel ("Book Now" button), The Kili Guides ("Download Itinerary" button), Vacations to Go ("Contact Us" form).

At the moment, we are not able to recognize / remember the users who interact with the widgets, as from an iFrame, we cannot place a cookie on the user's browser. Therefore, in Amplitude, every time a user opens another widget, they are counted as a new user. This is inflating our user count and hinders us from answering questions such as: How many users are overall interacting with our widget? How well is our check-out flow converting (-> % users who end up placing a booking)?

We started looking into this with our engineering team and are exploring potential solutions. Research / ideation done so far:

Do you have any guidance for us how to get the Device ID through the SDK? Or even an alternative solution that could work for us?

2 replies

Y
Rank
Userlevel 2
Badge +5
Hello Julia,

My name is Yosimy from Amplitude Support, happy to help!

You're on the right track with your idea of using the Device ID from the Amplitude SDK. You can indeed retrieve the Device ID that Amplitude uses with the following line of code:

const deviceId = amplitude.getInstance().getDeviceId();

This method can return `null` if a `deviceId` hasn't been generated yet. You can find more details about this in the Amplitude JavaScript SDK documentation: https://www.docs.developers.amplitude.com/data/sdks/javascript#get-device-id

Once you have the Device ID, you can send it to your backend and from there to Amplitude. This should help you track user interactions with your widgets across different websites.

However, please note that there can be challenges with this approach, especially when it comes to persisting the Device ID so that user actions are tied together. Here's a general approach that we recommend:

1. Create an iframe on the page which points to a domain you control.
2. Load Amplitude inside of the iframe.
3. Communicate with the iframe using cross-domain messaging.
4. Receive events inside the iframe and persist the Device ID on the domain you control.

You can find more details about this approach in this community post.

I hope this helps! Let me know if you have any further questions.

Best,
Yosimy


P.S. Checkout upcoming events and user meetups on our events page.
A

Hello Julia,

My name is Yosimy from Amplitude Support, happy to help!

You're on the right track with your idea of using the Device ID from the Amplitude SDK. You can indeed retrieve the Device ID that Amplitude uses with the following line of code:

const deviceId = amplitude.getInstance().getDeviceId();

This method can return `null` if a `deviceId` hasn't been generated yet. You can find more details about this in the Amplitude JavaScript SDK documentation: https://www.docs.developers.amplitude.com/data/sdks/javascript#get-device-id

Once you have the Device ID, you can send it to your backend and from there to Amplitude. This should help you track user interactions with your widgets across different websites.

However, please note that there can be challenges with this approach, especially when it comes to persisting the Device ID so that user actions are tied together. Here's a general approach that we recommend:

1. Create an iframe on the page which points to a domain you control.
2. Load Amplitude inside of the iframe.
3. Communicate with the iframe using cross-domain messaging.
4. Receive events inside the iframe and persist the Device ID on the domain you control.

You can find more details about this approach in this community post.

I hope this helps! Let me know if you have any further questions.

Best,
Yosimy


P.S. Checkout upcoming events and user meetups on our events page.


Hello @Yosimy.Cortes,
 

Thank you for providing us this information, but I am wondering how could this approach help us with the tracking for widgets problem (iFrame)  mentioned by @Julia Mueller, assuming that third-party cookies are blocked.


For this specific scenario our main problem is storing the Device ID. Since the generated Device ID will not be stored anywhere, the next time the user will interact with the widget a new Device ID will be generated (at least from my understanding).
Also please take into consideration that the users are not logged in (anonymous) so even if we send the Device ID to our backend and store it somewhere, unless we store it in a cookie in the user’s browser (actual behaviour) there is no way of matching Device ID’s to users.

 

I will also provide an example so it’s easier to understand our problem and what we want to achieve for the widgets that are embed with iFrames:

Actual behaviour:

  1. User X submits Vacations to Go ("Contact Us" form) 
  2. Same user X submits again Vacations to Go ("Contact Us" form) at a later time.
  3. In Amplitude this will be tracked like 2 separate users submitted the form.

 

Desired behaviour:

  1. User X submits Vacations to Go ("Contact Us" form) 
  2. Same user X submits again Vacations to Go ("Contact Us" form) at a later time.
  3. In amplitude we want to track that user X submitted the form 2 times.


Could you please help with an alternative?

Reply


Terms & ConditionsCookie settings