Tracking an google analytics event in an iframe - javascript

Okay so I'm a google analytics & js noob so I know the absolute basics.
On my site http://www.wildseasonthegame.com I have some humble bundle widgets which are Iframes.
I'm still trying to understand analytics but as I understand it Theoretically I should be having a code like this
something goes here
Now my question is =
Can I replace href with iframe and will it just work? Or will i need to do other stuff (like add some extra JS) to make it work, seeing as how iframes are funny little things
Or do I wrap each iframe in its own a href with a # destination and track conversions that way?
HOw do i differentiate between clicks made to input their email and clicks to purchase?
Any other suggestions how I can track the conversion offsite. Humble bundle has an off site thank you page, but It doesnt look like it redirects back to myne, let alone guarantee tha tpeople will arrive at my page instead of closing their browser after the transaction.

If content is iFramed in you're unfortunately going to have a hard time getting any tracking on it thanks to the same-domain policy. The best way would be to add tracking code to the pages iFrame'd in... but good luck getting Humble Bundle to add your code to their pages. You can get some click tracking on it, but it'd literally just be clicks anywhere on the iFrame.

Related

Refreshing Google Ads for Single Page Application

I have a website (hellostory.org) with a custom event that's fire when a user clicks a link. Instead of re-loading the entire page a fetch request is issued, the server processes the <main> tag content, and then the <main> content is entirely replaced with the server's response.
The reason for this is three-fold:
refreshing the entire page content is not optimal for this kind of content
my own benchmarking has found that fully refreshing the page is an order of magnitude slower than just processing the rendering that changes from page to page
a better user experience, especially on mobile.
Problem is though, the ads never refresh. I'm wondering if any of you guys have had a similar problem? How have others tackled Adsense for single page applications? Any advice that won't violate Google's TOS? Or maybe even documentation from Google on this topic?
EDIT: To clarify, I only want to refresh the page when my custom "user clicked a link" JS event fires.
This is being done with:
googletag.pubads().refresh();
It is against the TOS of Adsense, but you can use it with Adsense + DFP (Double click for publishers)
This documentation should point you in the right direction
Remember to use DFP, or you will get banned!

How to Track Clicks in an IFrame with Google Analytics?

I'd like to track outbound clicks within an iframe on my self-hosted Wordpress site. I already use Google Analytics to track inbound visitors (GA code in the header), but I'd like to know which/how many of those visitors click on links within the iframe on each of my pages. For the record, the iframe does come from an external advertiser.
This is the iframe code I was given (using sample names in place of real ones):
<iframe src="http://www.advertisersite123.com//widget.html?width=510&height=950&product=2" frameborder="0" scrolling="no" width="510" height="950"></iframe>
This line of code is currently pasted on single.php, making a table of links appear on every single post at the bottom of the page.
I'd like to know how many clicks (just clicks in general is fine, don't need to know where they go) are occurring in this iframe. Ideally broken down by each individual URL on my website so I can determine which URLs are more successful in generating clicks within the iframe.
And if possible, I'd like to create a funnel that tells me which visitors to my website (by source) exit via clicks in the iframe.
Is any of this possible? And if so, what code do I add to the page?
Thank you for any and all assistance, it is appreciated!
What you are asking for is not easily done. In general, you cannot have javascript on the parent page that can hook into events on the iframed page if it is not hosted on the same domain. Same thing for the iframe page trying to tap into the parent page's DOM. This is called cross-site scripting (XSS), which goes against the same domain origin policy.
At a minimum, the easiest thing to do would be to put the GA code on the iframed page. But that's probably not something you can do (though it couldn't hurt to ask the vendor).
But some vendors (usually social media vendors such as Facebook, Google and Twitter) will have their widgets that output an iframe w/ info. They will set their server to allow for cross-domain scripting, which would allow you to tap into the iframe's DOM. Usually though they provide an API along with the widget that makes it easier to hook into relevant events (like share events), so that you don't have to do (much) coding yourself.
Basically long story short, there's no way for you to track it without the person in charge of the iframe domain getting involved.
I was searching for something similar and came across this. This jQuery Plugin lets you track an Iframe.
Tried events?
If the click is out of iframe:
_gaq.push(['_trackEvent', eventCategory, eventAtion, eventLabel]);
If the click is inside the iframe you should use:
window.parent._gaq.push(['_trackEvent', eventCategory, eventAtion, eventLabel]);

Providing a back link inside of a Facebook tab

I'm trying to use history.back() inside of my Facebook app to go up our site hierarchy since the browser back button is obviously useless in this sort of situation. I'm using javascript to avoid having to manage history site on the backend but it's proving to be very buggy. Clicking a link with href="javascript:history.back()"causes the page to scroll around a couple times then actually causes top to go back...
Any help with this subject is greatly appreciated.
So it turns out that history.back() is not possible due to the way Facebook hacks around with the iframes that run apps. I ended up having to implement a pseudo-back link via an implementation in the server-side framework I was using.

Rendering ads in an iFrame then moving them to the main window

I have a set of ads that are written out by document.write because that is the only thing that the adserver will do.
I have seen other sites reload ads on the page if the user sits there for a while (something I may want to do in the future). So I was playing with loading the ads in an iFrame, then moving them out into the main window afterwards. This seemed to work quite well, until it served up a google ad which is itself in an iframe within the iframe. Is it possible to pull them out properly / move google ads around the page at all?
This is what I have currently, and it works for everything but iframed ads within the iframe.
$().ready(function(){
$('#iframe').load(function(){
var middle_ad_contents = $('#iframe').contents().find('#middle_ad').html();
$('#ad_middle').html(middle_ad_contents);
});
});
[edit]
Upon further investigation... it looks like reloading google ads may be against the terms of service, perhaps I shouldn't do this?
[edit 2]
Reloading the whole page is not really an option (and kind of a dick move).
The point was to perhaps rotate the ads, but more to stop them from blocking the pageload because adserver X, which is being served through adserver Y which is being served through adserver Z is slow/not responding. The iframe seemed like the best solution because then I can delay the document.writes which are 2 or three levels deep until the end of the page without them wiping out the whole page as document.write after pageload === document.replaceTheWholeDOM. There is also the perhaps the option of monetizing ajaxy/other iframed (shudder) content with this method.
The best way to go about this is probably using a document.write replacement. There are several to choose from, but here's one: https://github.com/eligrey/async-document-write
This will replace the global document.write function with one that can be used even after the page has loaded.
Not only may it be against the terms of service, but it is also lowering the value of the ads to the advertiser and creating a clunky element in UI.
Think about it from a UI standpoint...you're on the site, concentrating on something, then everything flashes. Your attention goes from what you were concentrating to to figuring out what just happened. Never mind, just a banner flip. Next.....now, where was I?
For the advertiser, what if you notice the ad and are about to click on it and BOOM, it changes. Now what, can you go back? If not, you just lost revenue. Users spend seconds on many pages, so unless you've got an incredibly "sticky" website, how much exposure is the advertiser really going to get? Remember, Google rewards AdWord sites for clickthroughs, not based on volume shown, which can actually hurt your CTR.
If you're determined to make this happen, I think I would consider attacking it by having the ad server post directly as it's intended into the dom, then use a javascript-based timer to asynchronously ping the adserver and again tell it to redraw the desired div. I would avoid iFrames like the plague because they're just not friendly in this age of simple Dom manipulation.
Or, you could just take the MSNBC approach and reload the entire page every X minutes. It's a horrible UI pattern, but it would achieve your goal and likely bend (but not break) TOS.

Can I with javascript lockdown browser address bar to a specific domain?

I'm quite new at Javascript, and have so far only used the DOM, but I now need to access the browser model, and I don't know if what I'd like to do is possible.
The problem: sometimes I let my youngest daughter browse some kid-friendly Flash game sites. The problem is that most flash games display links to other sites in their splash screens. So often, my daughter chooses a game, and then, while the Flash game is loading, she clicks on the splash screen, which takes her to some other site. It drives me nuts, because every two minutes she calls for help, as the browser has opened a new tab on some other site.
My specific needs:
I wondered if there might be some way with Javascript, like with a bookmarklet or something alike, at any particular moment lock down the browser in some kind of pseudo-kiosk-mode, so it ONLY follows links to URLS on the current domain, ie the domain in the address bar when the bookmarklet was activated.
I don't expect anyone to solve the whole problem for me, but some pointers would be greatly appreciated. Thanks a lot in advance.
If the link is being opened from Flash, you can't do anything about it. If it was a normal HTML link you could try to intercept the click event and block it if it's an external link. But with Flash, you're out of luck.
You're going to need some kind of browser extension or external monitoring software for that.
Extending what Matti said, I see two approaches worth looking into. If you search for something like "your_browser kiosk", replacing your_browser with the actual name of your browser, you'll likely find some useful tools. Alternatively, if there is a consistent set of problem sites, you could modify your hosts file to block those sites' domains.

Categories