Redirecting Ceros to a Mobile Variant

knlowledgeart

Redirecting Ceros to a Mobile Variant

Ceros content automatically scales to fit whatever screen it’s viewed on. But sometimes you need to adjust your layout or functionality specifically for mobile and desktop visitors. Which is where Mobile Variants come in. Below we will demonstrate how to set up a mobile redirect for both Standalone and Embedded Experiences. For a refresher on the difference, check out our Standalone vs Embedded lesson.

Note: You must have a desktop and mobile experience already published to follow the below steps.

Embedded Ceros Experience Redirect

Locate the Desktop Experience in your admin, and hover over the Update button. With this menu expanded, select the “Embed” link and copy the “Full height” embed code. Navigate over to the variant embed code generator in a separate window and paste the Desktop Embed Code in the “Desktop Experience Embed Code” box in the generator. Follow the same steps to copy the Mobile Experience embed code, and paste it into the “Mobile Experience Embed Code” box.

Once you have both embed codes in place, you can specify whether you want to detect for mobile based on touch actions or based on a specific breakpoint. When you’re ready, click the “Generate Embed Tag” button and copy the new embed code provided. This is now ready to be embedded on your site.

Note: If “Detect Touch Devices” is toggled on, tablet devices and two-in-one laptops will be served the mobile Experience. If you want tablet users to be served the desktop Experience, ensure you use the breakpoint option.

Standalone Ceros Experience Redirect

To redirect to a mobile experience when viewing a standalone view link, first, locate your Desktop Experience and copy the view link provided. In a separate window, open up our Standalone Redirect Wizard and paste the Desktop URL in the desktop URL box. Repeat these same steps to copy the Mobile Experience URL and paste it in the Mobile URL box.

In the “Redirect Based On” drop-down, select how you will be detecting for mobile. The options include:

  • View Port: We will differentiate between mobile devices and desktop devices based on screen size. Anything below the provided size will be served the mobile Experience automatically. Anything above will get the Desktop Experience.
  • User-Agent: We will differentiate between mobile and desktop based on an existing database of user-agent strings.
  • Touch Event Support: To differentiate between mobile and desktop, the Ceros Experience will listen for touch events and serve a mobile Experience to any touch devices. Note: two in one laptops with a touchscreen will also be served the mobile version using this redirect option.

Tag Options

These options are for more advanced use cases. If you are unsure if you need any of these options either leave blank or contact support for help.

  • Preserve Page Number: When being redirected to a different Experience (from desktop to mobile, or vice-versa) carry over the page number to variant Experience.
  • Preserve URL’s Fragment: If you are using deep-linking to send users to specific sections within your Experience, you can preserve these fragments even when switching between variants.
  • Preserve URL’s Query String: If you have specific UTM parameters (for tracking purposes or other) you can preserve these strings even when switching between variants.
  • Force the URL to use HTTPS: Toggling this box ensures the Experience will always be loaded securely.
  • Redirect Preview Player: By default, the mobile redirect will only work on view.ceros.com links, not on the preview.
  • Do Not Redirect Back to Referrer: If the code was entered incorrectly, you may be inadvertently forced into a continuous loop. This checkbox ensures that won’t happen.
  • Log Debugging Information to JavaScript Console: For admin users only.

Copy the “Desktop Tag” code and up your Desktop Experience in the Studio.

  • Open up the settings panel and toggle the custom HTML tab
  • Paste in the Desktop Tag code
  • Click save and then publish your Experience

Navigate back to the Standalone Redirect Wizard and copy the “Mobile Tag” code, and open your Mobile Experience in the Studio.

  • Open up the settings panel and toggle the custom HTML tab
  • Paste in the Desktop Tag code
  • Click save and then publish your Experience

Your standalone Experience should now redirect correctly. If you have any questions or concerns setting this up, be sure to reach out in the chat widget.