Integrating Crazy Egg and Unbounce with multiple variants

  • 24 February 2014
  • 9 replies
  • 41 views
J

Can any one help me please. We are trying to integrate CrazyEgg Tracking with Unbounce so that we can view multiple variants in the CrazyEgg dashboard. So far all of our attempts have failed and no matter what the same screenshot is used for both variants.

Has anyone had more success?

9 replies

Johnny_Opao
Userlevel 3

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 🙂

R

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.

R

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.

Noah
Userlevel 7

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!

R

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
J

Awesome!!

D

Did you try to use CrazyEgg page camera?

http://www.crazyegg.com/page_camera

Yoav_Aziz1

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

http://www.crazyegg.com/page_camera

R

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/[Variant 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.

Reply


Terms & ConditionsCookie settings