Target users based on current window size

There may be a time when you want to only show an experience based on a certain window dimension to desktop and laptop users

The following example will illustrate the use of a template in the form of a Campaign Variation.

1. Set your Campaign Variation Trigger to match on HTML pages by using Content-type: text/html or an HTML element such as a doctype or </body>. Optionally also use additional Triggers accordingly.
2. Inject a code block at or near the bottom of the page like the following:
   

   <script type="text/javascript">
   function ssdebounce(func) {
   var timer;
   return function(event) {
   if (timer) clearTimeout(timer);
   timer = setTimeout(func, 100, event);
   };
   }
   function ssWindowTrigger() {
   var minwidthpx = 1159;
   var minheightpx = 0;
   var minutes = 525960; /* 525960 is 1 year expiration. change to 30 for session expiration */
   var date = new Date();
   date.setTime(date.getTime() + (minutes * 60 * 1000));
   if (window.innerHeight > minheightpx && window.innerWidth > minwidthpx) {
   document.cookie = "sswnd=1; expires=" + date.toUTCString() + "; path=/; Secure; SameSite=Lax;";
   /* Optionally add an EventTrack here */
   }
   else {
   document.cookie = "sswnd=0; expires=" + date.toUTCString() + "; path=/; Secure; SameSite=Lax;";
   }
   /* console.log('sswnd: ' + window.innerWidth + ', ' + document.cookie.match(/(sswnd=[0-9]+)/)[1]); */
   }
   ssWindowTrigger(); /* Check on page load */
   window.addEventListener('resize', ssdebounce(function(e) {
   ssWindowTrigger();
   }));
   </script>

3. Update the first three variables values as desired.

   var minwidthpx = 1159;
   var minheightpx = 0;
   var minutes = 525960; /* 525960 is 1 year expiration. change to 30 for session expiration */

4. Add the Campaign Variation to your campaign
5. Set the Trigger(s) in your Campaign to include:

   Cookie: (contains) sswnd=1

6. Copy this template and repeat this process for other window dimensions in other Campaigns as needed.

Notes

The approach is that the Campaign Variation code will check on every new page load and update the cookie. On each subsequent page load the updated cookie will be passed to the server and the Trigger will evaluate it. An adjustment to this script to only create the cookie once per visit can be made if that is a requirement.

If the page is dynamic on the client (such as a SPA site), a Client Side Variation could be used to check the window dimension cookie with every URL change.

This approach is meant for Desktop users since resizing a window is not an option with Tablets and Mobile devices. Please use Mobile Audiences to target those users based on screen size.

Caution

Do not use a singular counting method that only counts in each Variation Group when the user window size meets the required dimension as the split will likely be uneven. Typically you would leave the default counting for one or more variations in your Variation Group.

Other Metrics

Do consider additional metrics for:

• When the dimension is met (EventTrack in the script code)
• When the cookie is met (sswnd=1, a Metric that has the same Cookie Trigger)

These metrics will provide data in your Performance Matrix and will support additional segmenting options.