Designer Courses / Publishing & More

Mobile Variant Redirect

In this lesson, we are going to set up a mobile variant redirect for both standalone and embedded Experiences. If you need a refresher on the difference between Standalone and Embedded – check out our Standalone vs Embedded lesson. By default, Ceros will scale to fit whatever device the user views your content on, however, you also have the option to create a completely separate Experience for desktop and mobile devices. In this lesson, we are going to use two finalized Experiences — one designed for desktop viewing and one for mobile. Be sure to upload both of these Experiences to your admin before proceeding.

The steps for redirecting an Embedded redirect or Standalone redirect are slightly different. Be sure to follow the directions for your specific use case below.

Embedded Ceros Experience Redirect

To get started, go ahead and publish both the desktop and mobile Experiences by hovering over the respective tile in the admin and selecting the publish option. For this example, we are going to use the full height embed for both Experiences, however, the process will be the same if you are using the scrolling embed. Once you have both of these Experiences published, you can open up the variant embed code generator in a separate window.

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. Paste this code in the “Desktop Experience Embed Code” box on the embed generator. Follow the same steps to copy the Mobile Experience embed code, and paste it into the “Mobile Experience Embed Code” box.

Embed Code variant

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

For the standalone redirect, we’re going to use the two test Experiences we uploaded earlier. To get started, open up our  Standalone Redirect Wizard and then navigate over to your admin where these two Experiences are located. Hover over the “Update” icon of the Desktop Experience and select the “Embed” option. Copy the Published URL and navigate back over to the Standalone Redirect Wizard. 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.

When you are satisfied with your selection, copy the “Desktop Tag” code and navigate to your Desktop Experience studio. Open up the settings panel, toggle the custom HTML tab, and paste in the Desktop Tag code into this window. Click Publish. Navigate back to the Standalone Redirect Wizard and copy the “Mobile Tag” code and navigate to your Mobile Experience studio. Open up the settings panel, toggle the custom HTML tab, and paste in the “Mobile Tag” code into this window. Click Publish.

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.

 

Mobile Variant Redirect