We are going to launch JS based widgets which webmasters (any site) will be putting on their site by embedding a small code snippet like :
<iframe src="SOURCE_PATH" frameborder="0" width="300px" height="150px" scrolling="no" id="cd_frame"></iframe>
Inside the widget there are three links and we need to track how many clicks are happening on them from the external sites where the widget is going to get used.
If I simply put the code which GA provides will that work? OR do I need to make any changes?
Thanks.
you should be able to track from your iframe as it would appear to google analytics as a regular page. your issue would be knowing what iframe you were tracking. if you can pass a unique id via the iframe url then you should be able to add a custom parameter to track the different sites.
eg
<iframe src="SOURCE_PATH?uniquetrackingid=123" frameborder="0" width="300px"
height="150px" scrolling="no" id="cd_frame"></iframe>
information about custom tracking codes can be found here
http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=55585
Related
I have the following Iframe attached to my HTML code:
<iframe width="640" height="360" src="" frameborder="0" scrolling="no" allowfullscreen></iframe>
where the src can be any embedded video (like https://www.youtube.com/embed/fWa5kDtyV0w, for example). What I'm trying to do is the following: when the user pause the video, a function must be called to save the time of the video in a variable. However, I cannot find a way to this if, unless of using specifics APIs, like the one from Vimeo or Youtube (what I don't want to do, because some platforms don't have it). So, is there a way to interact with the video in the Iframe using JS or other stuff?
Extra information: In some of my tests, I got blocked by the browser by XSS.
I have an iFrame that displays a 3rd party eform for our customers to fill out. After the form is submitted, the iframe displays another page that I would like to prevent from showing. I've tried using the sandbox attribute to accomplish this but it doesn't seem to have any effect.
<iframe src="form-url"
width="100%" height="1200px" scrolling="no" sandbox="allow-forms allow-scripts"></iframe>
In HTML5 you can use sandbox property. Please see Pankrat's answer below. http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
I have an issue about embedded canvas is that I don't want
to use double click feature on it.
While API given by Sketchfab doesn't offer such functionality, is there a way to block event getting there in the first place ?
UPDATE:
I am embedding model from Sketchfab.
Here's the embed:
<div class="sketchfab-embed-wrapper"><iframe width="640" height="480" src="https://sketchfab.com/models/9eb60eebc20e45c4b586e1a6fe6c5983/embed" frameborder="0" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
...
Since you stated that you are using Sketchfab (which is embedded with an iframe) this is not possible due to XSS protection. No major browser will allow you to access embedded cross site content.
Take a look at this link for more information about cross-frame scripting and security.
can you check this? Remove Event
$('canvas').off('dblclick');
https://jsfiddle.net/gtbypwLb/
In my app users can just paste a link to something like a youtube or vimeo video or some soundcloud audio and it then figures out how to embed that via oembed.
So if you paste the link to a video copied from your address bar it can figure it out. If you paste the share link that the apps kick out in their "share dialogs", it works too. If you paste the iframe embed code I can parse that and check it against a whitelist and you get exactly the same thing again.
I want to add Google Maps embedding too, but it doesn't support oembed. Furthermore, you now get the "classic" (or old) Google Maps, but you also get the new google maps. (To complicate things further, you also get google maps engine, but let's ignore that one for now..)
With classic google maps it is trivial to convert from a share link to the iframe embed URL because it essentially has the same URL parameters, you just add an output=embed URL parameter so that Google will output the embed layout rather than the desktop site layout.
The new google maps isn't that simple. The share link's parameters are different enough from the embed link's parameters that you can't just do a simple "prefix conversion" and get something usable out.
What I mean by that is that this is a share URL:
https://www.google.com/maps/preview#!data=!1m4!1m3!1d62859!2d-99.1363591!3d19.4492142
and this is the embed iframe's src for the same map:
https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d60194.35709853462!2d-99.1363591!3d19.4492142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1390394813768
If you just change the prefix from https://www.google.com/maps/preview#!data= to https://www.google.com/maps/embed?pb= or back it doesn't work.
It looks like some of the parameters in there are the same, but clearly there's much more to the embed one.
Is there documentation or code or examples or something out there that explains how this works? I've looked everywhere I could think of and the closest I can find is iframely's google maps plugin, but they only convert some of the parameters and then they use the old Google Maps' embed. I would prefer to use the more minimal new one, at least when someone pasted a link or embed for the new google maps.
tl;dr
I want to convert
https://www.google.com/maps/preview#!data=!1m4!1m3!1d62859!2d-99.1363591!3d19.4492142
to
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d60194.35709853462!2d-99.1363591!3d19.4492142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1390394813768" width="600" height="450" frameborder="0" style="border:0"></iframe>
or
https://www.google.com/maps/preview#!data=!1m4!1m3!1d316784!2d9.927821!3d53.558572!4m12!2m11!1m10!1s0x0%3A0x4263df27bd63aa0!3m8!1m3!1d303354!2d9.927821!3d53.558572!3m2!1i1024!2i768!4f13.1
to
<iframe src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d303354.2311276431!2d9.927821!3d53.558572!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!1s0x0%3A0x4263df27bd63aa0!5e0!3m2!1sen!2sus!4v1390395234903" width="600" height="450" frameborder="0" style="border:0"></iframe>
and make it work as if Google Maps supported oembed. I realise the iframe code has more information, but the only attributes that are useful to me are width and height to get the aspect ratio and src. I suspect that most of the url parameters can just be guessed or defaulted as I'm only really interested in things like the coordinates and the zoom level.
I can't see a way to do it using one of your own saved maps. However it is possible using a place name, coordinates or search results:
Show a single place:
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI&q=Space+Needle,Seattle+WA">
Coordinates:
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/view?key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI¢er=-33.8569,151.2152&zoom=18&maptype=satellite"></iframe>
Show search results:
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI&q=record+stores+in+Seattle"></iframe>
I embedded a web page in an iFrame like this:
<iframe id="frame" src="http://www.domain.com" width="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
Edit: The problem i am having is that the web page javascript is using the top property to find objects but now it is embedded in the iframe, is there a way to over ride this?
If I understand you right, you want to send data from the iFrame to the parent? If so, the error happens because Cross Site Communication is usually blocked to avoid XSS attacks. But you can keep your iframe, and use JavaScript and the window.postMessage(); function to share data.
https://developer.mozilla.org/en/DOM/window.postMessage