I have an iFrame-embedded Qualtrics survey installed on a client site. I need to be able to capture the parent page's URL and UTM (key value pair) into Qualtrics. I am able to capture the parent URL by using an embedded variable as described here, but not the key value pair. I have added an additional embedded data variable for the key value ("Mode"), but I don't know how to adjust the JS to include it. Any advice would be a HUGE help!
Here is the JS I'm currently using for the parent URL:
var parentUrl = (parent != window) ? document.referrer : "";
Qualtrics.SurveyEngine.setEmbeddedData("parentUrl", parentUrl);
Solved
How to pass key value pair from iFrame parent into Qaultrics?
+1Best answer by jaemaz
Thanks for the response @bgooldfed . I couldn't quite figure it out with your suggestions, but I did get help from a colleague and now it is working as intended.
I've outlined the solution below for the sake of anyone searching for this solution in the future. Let me know if I missed something or if you have an idea for making this little explainer more clear.
- Go to Survey Flow within your survey and create a new Embedded Data element at the beginning of your survey.
- In the Field dropdown that appears in the Embedded Data element type in this value: parentUrl (This value is custom -- it is not found in the list).
- Click Add a New Field, and enter Mode (This value is custom -- it is not found in the list).
- Click Apply, publish your survey and copy your survey link.
- Navigate to the back-end of the website where you want to place the survey.
- Enter the following script on the page where you want the survey to appear (add or remove whatever iframe parameters your want in the process, and replace "YourQualtricsSurveyLink1234567" with the URL for your survey.
8. Save the page. You should now be able to provide your audiences with custom URLs on the parent domain using various single key-value pairs (using "Mode" as the key). For example, if your survey was placed on this parent page: https://my-interesting-research-project.com/survey/, you could send out this URL https://my-interesting-research-project.com/survey/?Mode=AdChannelOne , and the parent url and "AdChannelOne" would pass through into Qualtrics.
9. Lastly— in order to see the key-value pairs you capture this way, navigate to the Data and Analysis tab, click on Column Chooser, then hover over Embedded Data— you will see all the available Embedded Data elements in your survey. Select parentUrl and Mode to make sure those captured values appear within your column view.
+25Hi jaemaz,
I'm not an expert in this area but I think you are going to struggle to retrieve any data outside of the iframe. The survey can't really "see" anything outside of its own scope - the only reason it can get the parent URL is because it is passed in (as document.referrer).
For starters I think you'll need to define the problem with some more info. eg: Where is the key value pair coming from? Is it being stored in in a data attribute? Is it an endpoint from an AJAX call?
Good luck!
+1Thanks for the response bgooldfed --
I'm looking to get the key-value pair from a string at the end of the parent URL itself (UTMs). (Such as https://mydomain.com/?Mode=1)
In poking around a bit more, it looks like I would have to bridge the gap between the parent site and the iframe since they are on different domains. I've read about inserting JS on the parent page and inside the iframe to pass the information into the iframe via a POST request, I'm just not fluent enough in JS to pull it off, and I'm hoping there is a simpler solution.
+25Is the UTM being captured when you are getting the parent URL? If so you could split it:var parentUrl = (parent != window) ? document.referrer : ""; //"https://mydomain.com/?Mode=1)
//find where the key-value pair starts
var index = parentUrl.indexOf("?") + 1; // 22
//store the key-value pair on its own
var utm = parentUrl.substring(index); // Mode=1
//split the values
var kv = utm.split("=") // ["Mode","1"]
Qualtrics.SurveyEngine.setEmbeddedData("parentUrl", parentUrl);
Qualtrics.SurveyEngine.setEmbeddedData("keyValue", kv);
I'm assuming you'll only have one key-value pair, if you have more you'll need to have a second split to separate each pair and a way of setting each pair separately in the embedded data.
If the UTM isn't being captured when you get the parent URL however, I can't think of any method other than a POST request (assuming you have control of the parent page). It may seem daunting at first but there are tons of good tutorials out there - once you get the hang of it it's a cinch :)
Good luck!
+1Thanks for the response @bgooldfed . I couldn't quite figure it out with your suggestions, but I did get help from a colleague and now it is working as intended.
I've outlined the solution below for the sake of anyone searching for this solution in the future. Let me know if I missed something or if you have an idea for making this little explainer more clear.
- Go to Survey Flow within your survey and create a new Embedded Data element at the beginning of your survey.
- In the Field dropdown that appears in the Embedded Data element type in this value: parentUrl (This value is custom -- it is not found in the list).
- Click Add a New Field, and enter Mode (This value is custom -- it is not found in the list).
- Click Apply, publish your survey and copy your survey link.
- Navigate to the back-end of the website where you want to place the survey.
- Enter the following script on the page where you want the survey to appear (add or remove whatever iframe parameters your want in the process, and replace "YourQualtricsSurveyLink1234567" with the URL for your survey.
8. Save the page. You should now be able to provide your audiences with custom URLs on the parent domain using various single key-value pairs (using "Mode" as the key). For example, if your survey was placed on this parent page: https://my-interesting-research-project.com/survey/, you could send out this URL https://my-interesting-research-project.com/survey/?Mode=AdChannelOne , and the parent url and "AdChannelOne" would pass through into Qualtrics.
9. Lastly— in order to see the key-value pairs you capture this way, navigate to the Data and Analysis tab, click on Column Chooser, then hover over Embedded Data— you will see all the available Embedded Data elements in your survey. Select parentUrl and Mode to make sure those captured values appear within your column view.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.