User recognition in iFrames

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:

Found this community post: https://community.amplitude.com/data-planning-and-governance-73/using-amplitude-on-our-customer-s-website-2210?postid=7790#post7790 -> however, this seems not doable in our case, as the operators would have to implement Amplitude tracking on their websites
Idea that could work for us: Get Device ID from Amplitude SDK → send to our backend → our backend sends data to Amplitude.
- To further develop this idea & be able to implement it, we would need some more guidance from your end! Especially, we need to understand if/how we could get the Device ID from the Amplitude SDK!

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?

Find more posts tagged with

Integrations

SDK

Device IDs

Accepted answers

All comments

Yosimy.Cortes

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.

Andrei.Oprea

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:

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

Desired behaviour:

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

Could you please help with an alternative?

Quick Links

Unanswered Questions

time format on import from Big Query
I am running into a loop when attempting to import data from BigQuery. At origin, my data is already in milliseconds since epoch. If I query: event_time as time, I get the error: 1.'time' column should be a TIMESTAMP_NTZ column (Snowflake) or a TIMESTAMP column (BigQuery). example for the type of 'time' column is…
Import data from one amplitude account to another
How do I transfer data from one amplitude account to another? It seems all the community chats about this have completely broken links. Easy to export, no way to import, very frustrating. :(
@amplitude/plugin-web-vitals-browser build fails on CRA v4 (react-scripts@4.0.3)
When using @amplitude/plugin-web-vitals-browser with Create React App v4 (react-scripts@4.0.3), the build fails with: ./node_modules/@amplitude/plugin-web-vitals-browser/node_modules/web-vitals/dist/web-vitals.js<br /><br />SyntaxError:…
Question about Amplitude Export API Data Delay
Hello, I'm using SpringBoot and Kotlin to integrate with the Amplitude Export API. The official Amplitude documentation (https://amplitude.com/docs/apis/analytics/export) states that "data is available to export at a minimum within 2 hours of when the servers received it." However, there's no clear information about the…
Retrieve via the API users based on a user property
Hello, Is there a way to make a query like: “Give me all the users that have the user property X equal to 10”, by using just any of the APIs, without making a cohort first through the Amplitude’s UI? Thank you!