Rich-text Reply

Tracking goals in an iframe

chrisgosling 06-13-14
Accepted Solution

Tracking goals in an iframe

Is there a way to track goals inside of an iframe?  I'm using a tweet button and it is put in as an iframe.  I can't seem to track clicks on the button.  Has anyone found a way around this?

Shaunak 06-13-14
 

Re: Tracking goals in an iframe

Hi Chris,

Yes you should be able to track goals inside an iframe as long as you have control over it. Just load the snippet inside the iframe and you should be able to track the clicks.

Optimizely
shirley 06-14-14
 

Re: Tracking goals in an iframe

I had a vimeo video (iframe) that wasn't tracking goals either. We've ended up tracking it in Vimeo which gives us all the stats. Maybe Twitter has the same?

Level 2

Re: Tracking goals in an iframe

Thanks Shaunak,
I'm using the tweet button directly from twitter and their code generates the iframe, I don't believe I have access to adding the optimizely snippet.

Shirly,
I'm also working on a video test now and have been considering going that route, I haven't seen any way to do that with twitter though, besides doing a manual search of how many tweets match the ones sent from the button. I think this would be flawed by any users with private accounts. If you've found an alternate way to track these tweets I would love to hear it.
shirley 06-16-14
 

Re: Tracking goals in an iframe

Chris,
There's supposedly a way to add the tracking into OptImizely with an iframe, but it's complicated. And going through vimeo is much easier in my opinion. I guess you're right about Twitter, unfortunately. Let me know what you end up doing, I'd be interested to know as we may end up doing something in the future.
Shirley
Level 2
SpencerPad 06-16-14
 

Re: Tracking goals in an iframe

[ Edited ]

In short: No, you can't track clicks within an iframe on a page you don't control.

 

In programming terms, and iframe is just a frame that is loading part of another page. Anything in the iframe is out of the ability to track unless the tracking code is on the page in the iframe. If it's twitter, there is no way to add tracking in optimizely.

That said, you can change the type or use a 3rd party tweet button that does not use an iframe.

Cheers,
Spencer Padway
Director of Performance Marketing
Sellpoints

Re: Tracking goals in an iframe

Here's how I worked around it guys.

The div that I wanted to put my tweet button inside has a class of tweetwrap. This has to do with the way I wanted the tweet button to overlay over an image. Instead of using the default tweet button code from twitter I used the following code to pull in the page title and url.

$('.tweetwrap').prepend('<div class="custom-tweet-button"><a href="https://twitter.com/intent/tweet?text='+ encodeURIComponent(document.title)+'&url='+encodeURIComponent(document.URL)+'&via=SoleCollector" target="_blank" alt ="Tweet this page"><img src="//cdn.optimizely.com/img/631700291/481a07d6511b4d439cc0c387b7b70caf.png"></a></div>');

This allowed me to have a user tweet the page link out with the page title and automatically link to our twitter account .

I'm not sure yet if optimizely changes the url of a user when they are placed in a test. If so this may effect the test because anyone who clicks their link will get dropped back into the test. Does anyone have any input on this?
shirley 06-17-14
 

Re: Tracking goals in an iframe

I don't think it changes the url. We have a test running right now and it hasn't changed.
Level 2
Junan 06-18-14
 

Re: Tracking goals in an iframe

If you've implemented your Tweet button using "Twitter for Websites" (https://dev.twitter.com/docs/tfw), there are actually callback functions built in so you can track when a tweet occurs. You can take advantage of these callback functions (https://dev.twitter.com/docs/tfw/events) and send an Optimizely custom event when these occur.

For example, you could create a custom event called "tweeted" and tell Optimizely that a tweet occurred by using some code on your page like:
window.twttr.events.bind('tweet', function (event) {
window.optimizely.push(["trackEvent", "tweeted"]);
});
Junan Pang
Optimizely
dkhanal 08-01-14
 

Re: Tracking goals in an iframe

[ Edited ]

So, similarly, if we have a wistia video in an iframe, is it possible to track clicks of the video? Can we just add the optimizely snippet in the iframe markup like this:

 

<iframe src="//blah blah, bunch of settings...width="474" height="267" style="width: 474px; height: 267px;">

<script http://my optimizely snippet></script>

</iframe>

 

Level 2
Junan 08-01-14
 

Re: Tracking goals in an iframe

@dkhanal 

Great question, Wistia actually has a great API that allows you to interact with their player and know when certain events have taken place with the video. I've used the Wistia embed before and bound an event to the wistiaEmbed variable on the page.

 

It appears that there's also a script that you can add that will allow you to access the player API from outside of the iframe which will allow you to bind events to the Wistia player.

 

An example with the embed API, would be something like this (you can replace the console log with an Optimizely custom event):

 

wistiaEmbed.bind('play', function(){console.log("clicked play");});

 

You can likely do something similar to this but using the iframe script.

 

http://wistia.com/doc/player-api#javascript_player_api_events

 

Hope this helps!

Junan Pang
Optimizely
seanpowell 11-26-14
 

Re: Tracking goals in an iframe

I guess what's not clear to me (unless I missed something) is whether or not you setup a separate experiment for the iFrame's url or would it be/could it be included in the parent's url test? What if you are sending revenue back to Optimizely in the iframe?