How do I track Fancybox clicks in Google Analytics? - javascript

I have a page with 24 links that each open up a .html file in a modal window with Fancybox, and each .html file has a video embedded in it. How do I track to see who is opening which videos?

How google analytics works
You put a by Google provided javascript (the tracking code) on your page .
Everytime the page is loaded, the javascript is executed and a hit is recorded by Google.
How fancybox works
You can use fancybox in different ways but the default behaviour is that you feed it a link and it will open the content of this link inside an iframe
If you know how iframes work, you should know that they just load/display a page inside a page. But because they load an entire page, the by google provided javascript will also load.
Answer
So to finally answer your question...,
If you use fancybox by default (loading content inside an iframe) google analytics will already record the clicks on those pages.
If not you should check out the note below.
Note: This is how it works with the original Google Analytics tracking code. If you are using the new Asynchronous tracking you should really check out this page as it explains in detail how to hook custom events etc: http://code.google.com/intl/nl-NL/apis/analytics/docs/tracking/asyncUsageGuide.html

Related

How to do screenshot for frontend page with iframe?

I have made a screenshot function with Javascript for our page, when user click to send issues to us, it will automatically do screenshot of the page through "html2canvas", so we could see something in the snapshot about the issue.
Since we use Iframe to load third-party sites, "html2canvas" don't work to do screenshot inside the Iframe. I searched and found that this library does not support Iframe.
Then I found the "MediaDevices.getDisplayMedia()" screen capture API, I could use it to capture the page. Howerver, as the api could capture screen out of browser page, it needs user permission every time Javascript do screenshot.
I wonder if anyone know a tool or sdk that could screenshot the web page with iframe, without user operation. Thank you!

Wordpress, how to debug Javascript to check a specific behavior

I need to debug Javascript to check which function is called on a specific behavior.
To be more specific, when we click inside an iframe, all the page or at least the iframe is reloaded, so loaded 2 times.
For example, if you take a look at this page:
https://artetcadres.fr/art-et-images/#collection/hopper/
and click on the artist "Klimt", the main page activate a javascript function, display this image on the entire page and reload the iframe content.
I tried with the Chrome Devtools but can't figure out which function is called display the image "Loading..." and reload the iframe.
It's reloaded maybe because the url is dynamically updated. The anchor #collection/hopper/ will become #collection/klimt/.
This strange behavior appeared after an wordpress upgrade.

Make Google Bot detect AJAX contents

I'm developing a site (not mine) and I encountered a big trouble!
In this website I've got some modals that will open after a user clicks on a product, but I need to do so Google Bot detects these modals like pages. When a modal opens, a JS Function adds a # parameter to the URL like "#abc=modal_one".
I want that in Google Result appears this page as "www.test.com/page.php?#abc=modal_one". I've tried (and I'm trying) to render the page like Google Bot in Google Search Console, but GSC opens only the page and not the modal. I also added a ES6 (JS) code that just edits the page title when the modal is showing to the user (after user clicks to open the modal) but nothing, Google does not detect the page title set after the page is loaded.
If you can't understand something just tell me and I will try to explain my trouble newly.
Thanks in advance to all the StackOverflow community :)
Try exporting the various pages to a dynamic sitemap that Google can read.
View the Categorize parameters with the URL Parameters tool page for more information.

Reparse Google Plus Button?

I have a website where pages are loaded via AJAX so I reload the Facebook comments box and like button (FB.XFBML.parse()) each time a link is opened. I was wondering if there is a similar way to reload the Google Plus button with JavaScript for a page.
Parsetags should be set to explicit.
See: https://developers.google.com/+/plugins/+1button/
Then you can call gapi.plusone.go(); to have the tags re-parsed.

Google Docs in iframe AND Save & Close button

I am using Google Docs in my project using its API.
I am loading docs in modal window iframe using http://fancybox.net/ a jquery plugin
It works fine but when in Google Docs Save and Close button is press, it closes the iframe and redirects the current page to Google Docs, So is there any way I can prevent the redirection to Google Docs and just close the modal window?
Thank You.
There are a few other questions i've found on SO that deal with this type of question;
How to prevent IFRAME from redirecting top-level window
How to prevent IFRAME from redirecting top-level window
Basically it involves using the 'window.onbeforeunload' function to kill the iframe if it attempts to redirect.

Categories

Resources