Hey Daniel - I responded to your support ticket, but I’ll post the answer here for others to see:

When users create a snapshot/heatmap, they must create them for the direct variant url (hidden url). This allows their system to visit the page and capture the correct screenshot for the correct variant. From there the snapshot/heatmap needs to be set to track by name under Advanced Options. Track by name uses a javascript variable that is set to track a page vs the url. This allow them to track different variants regardless of the URL the page is served from.

So if you have a landing page at try.mysite.com. You can target each variant URL by appending the variant letter + .html to the end of the url:

try.mysite.com/a.html - for variant a

try.mysite.com/b.html - for variant b

That should do it, but if you run into further issues let me know through the support ticket you’ve opened 🙂

I’m trying to do the same thing as Daniel, but also implement separate Crazy Egg tracking for Desktop vs. Mobile views of Unbounce pages.

I have the following Unbounce pages, and separate Crazy Egg snapshots setup for each:

1.  mysite.com/a.html (desktop)


2.  mysite.com/a.html (mobile)


3.  mysite.com/b.html (desktop)


4.  mysite.com/b.html (mobile)

I’m struggling to get the Crazy Egg named Javascript to run on each unique Unbounce page variation.

I setup rules through Adobe Dynamic Tag Manager (DTM) to run the Crazy Egg named page tracking script on each variant, conditionally based on the URL viewed and the visitor’s Operating System.

However, the JavaScript is not firing on these pages. I’m not sure, but I think this isn’t working because viewers don’t actually load “mysite.com/a.html” - but actually load “mysite.com”.

Is there any other way to identify which Unbounce page variant the visitor is viewing? Other than the direct variant (hidden) URL?

Or any recommendations on how to fire different JavaScript on each variant, desktop and mobile?

Any help is greatly appreciated.

Thanks in advance.

In case this is not clear - it would be nice to be able to setup/run different JavaScript tags on the mobile and desktop versions of Unbounce pages.  If there’s already a way to do that - that’s what I’m after. Thanks again.

Although this isn’t an official workaround, I would suggest testing out the following code snippet on each your landing page variants: 

if ( lp.jQuery(window).width() <= 600 ) {







  // Your mobile code goes here







}else{







  // Your desktop code goes here







}

Give this a try and let me know how it goes!

Thank you!

I was able to get it implemented using Adobe DTM. Here’s how:

In Adobe DTM, define data elements for JavaScript variables that identify Unbounce pages and variants:

1. Unbounce Page Name: window.ub.page.name
   


2. Unbounce Variant ID: window.ub.page.variantId

Then setup Adobe DTM page load rules to fire CrazyEgg tracking scripts based on:

1. The above JavaScript variables


2. Window Size or Device Type

Awesome!!

Did you try to use CrazyEgg page camera?

http://www.crazyegg.com/page_camera

Did you try to use CrazyEgg page camera for taking the screenshot?

http://www.crazyegg.com/page_camera

You can get the Crazy Egg snapshots setup using Unbounce’s hidden identifier in the URL as the URL for the Crazy Egg snapshot. For example:   www.mypage.com/oVariant ID].html - where the Variant ID is “A” or “B” or whatever your Unbounce page variant is.

Then specify in Crazy Egg whether to run a desktop, mobile, or tablet snapshot.