Making Standalone Creatives Mobile-Optimized
What's on this page
Qtip: If you don’t have access to any of the features described on this page, reach out to your Account Executive. For more information about the differences between Digital Feedback and CustomerXM for Digital, see Digital Feedback vs. CustomerXM for Digital.
About Making Creatives Mobile-Optimized
The newer, guided creatives are built to include mobile optimization from the start, requiring less setup to use on mobile devices. These mobile-friendly creatives include responsive dialogs, feedback buttons, and templated embedded feedback.
However, there are standalone creatives that look pretty on your desktop, while appearing too large on a mobile screen. This is because older creatives do not have mobile optimization built in, and require extra setup to function well on mobile screens. This page covers how to optimize standalone creatives like pop overs, info bars, and sliders for a mobile browsing experience.
Qtip: Are you looking to gather feedback on a mobile app rather than a mobile site? Check out the Embedded App Feedback page instead.
Screen Resolution
You can display an Intercept or Action Set based on Device Type. However, mobile devices can come in many sizes, which might require more than two (desktop and mobile) versions of a Creative. In the case of some tablets, the Creative that looks best on your desktop might work just fine on the tablet.
Instead of basing display logic off of Device Type, it’s better to generate Creatives in different sizes and base their Intercepts’ logic on Screen Size.
Screen Resolution Logic
You can base Intercept logic or Action Set Logic on Screen Resolution. You are not limited to exact sizes – for example, maybe screens less than 500px get one Creative and screens greater than 500px get another.
Click the linked support page for step-by-step instructions and a list of common screen sizes.
Project Set Up
Formatting Embedded Targets
An Embedded Target isn’t just a link, like a regular Target, but an embedded window on the Creative where you show the target site or survey.
Lots of people prefer the survey embedded on the Creative to have no scrollbars. The Formatting Embedded Targets page will go over the changes you can make to your survey that will achieve this.
FAQs
I activated my intercept, but it‘s not showing up on my site. Why not?
I activated my intercept, but it‘s not showing up on my site. Why not?
- Logic: intercept targeting logic and action set logic are the conditions that must be met in order for an intercept to be displayed to a visitor. Checking this logic will be helpful in discovering why the Intercept is not displaying on a page.
- Logic sets that use “Contains”: A common cause of logic error is the use of the “Contains” vs. “Is.” To say a condition “Contains” means that the parameter you are basing the logic off (i.e., Current URL) will have the specified value present in addition to more information. For example, if I had logic that read as Current URL contains ‘qualtrics’, this would cause the intercept to display on any URL that has the word qualtrics present. The other option you have is using Current URL is [URL]. This condition depends on the visited URL being an exact match. Any differences or additional characters will prevent the intercept logic from passing.
- Intercept Revisions: When making edits to intercepts, changes are not made live until the intercept is published. When publishing an Intercept, a version of the intercept, or a “revision,” is saved. Reviewing the revisions that have been made is very useful for identifying any changes that may have suddenly prevented the intercept from appearing.
- Debug Window: The debug window is an invaluable tool for testing why an intercept is not displaying on a particular page.
For intercepts whose deployment code was implemented before March 2019, to enable the debug window, append a query string to any given URL called Q_DEBUG. This must be prefixed with a ? or a & like the following examples: https://www.qualtrics.com?Q_DEBUG, https://www.qualtrics.com/blog?item=value&Q_DEBUG.
For intercepts whose deployment code was implemented after March 2019, run the following JavaScript snippet in the Console of your web page:
QSI.API.unload();
QSI.isDebug = true;
QSI.API.load();
QSI.API.run();Qtip: The Website Insights debugger does not function if the code has been implemented using a tag manager. Also, if the URL already has a query string with a ?, then the debugger will require a & instead.
- Network Request: Most browsers possess a developer tools menu that allows a user to see a site’s source code, resources, cookies, and network calls. Website Insights possesses a distinct presence in the Network section of these tools. To check for these scripts running, open the developer tools and navigate to the Network section. Once here, reload the webpage and the menu should begin to populate with all network requests being made by the website. To identify Website Insights code, look for calls that begin with ?Q_ZID or ?Q_SID. This is the code itself running checks on the display logic. If you cannot find anything matching this format, then there is an issue with the implementation of your project code. You can refer to our support page on implementation for advice on where is best to place the code.
- Content Security Policy Issues: If you receive a console log that violates a Content Security Policy, there is most likely a restriction on your website that is blocking our intercepts from deploying. We recommend reaching out to your web-development team to resolve. To ensure your intercepts work, we generally recommend allowlisting the following items in your Content Security Policy headers:
- connect-src https://*.qualtrics.com
- frame-src https://*.qualtrics.com
- img-src https://siteintercept.qualtrics.com
- script-src https://*.qualtrics.com
- SPA URL Handling: If your site uses a single-page application (SPA) framework, make sure your code triggers history.pushState() when navigating between views. Some frameworks may re-render or update the URL without pushing a new history entry, which can prevent intercepts from firing. If you're using useEffect or similar lifecycle hooks, make sure your intercept logic runs after navigation is complete.
I have built my intercept but would like to test it before activation. How can I do that?
I have built my intercept but would like to test it before activation. How can I do that?
How do I have a creative appear smaller on mobile devices?
How do I have a creative appear smaller on mobile devices?
If you chose to make a pop over or an older creative instead, then this is where you would use multiple action sets. You will have different action sets for mobile devices and desktops. You will also have two different creatives for desktop and mobile devices.
That's great! Thank you for your feedback!
Thank you for your feedback!