Tracking interactions of a Single page Application in an Iframe - javascript

I have an iframe which contains a single page application, And I am looking to record actions within the form and hits to the page because it’s a single page app, do we need to add event tags to trigger the GA recording, as currently the page does not change URLs as you move through the form.
For Example “example.com” content is served in an “iframe” from a sub-domain (account.example.com/tba) that is a Single Page Application.How can I track interactions from it
Also help me with the GTM implementation

Related

Inheriting the Parent Cookie in an iFrame

We use a product at my company that allows us to embed secure forms on non-secure sites to transfer information. We do this through embedding an iFrame.
We use Google Tag Manager for most of our clients, and we have a module for tracking submissions of these forms. However, because of it being in an iFrame, every time we submit a form, the source of the traffic is a referral from the parent website, the one loading the frame, not the source of the traffic, throwing our analytics off.
More information:
We're using cookieDomain set to auto on all pageviews and events
GTM is installed on both the page loaded in the iFrame, and the page loading the iframe.
Pageviews are currently set to track on All Pages except for the domain the iFrame is on, but I've tried setting it to All Pages and it still tracks form submissions as a referral.
Tl;dr Form is in an iFrame. I land on a page with this iFrame from Facebook. When I submit the form, the source is the page with the iFrame, not Facebook. I want the source to be Facebook. How can I pass the cookie from the parent page to the iFrame, where the event occurs, within GTM?

How would I make a script stop running and affecting web page?

I have a script that rearranges elements on a page in a certain structure. It does this by manipulating the CSS with positioning values etc.
I want to offer users the possibility to view the page without it being affected by this script.
Could I fire off a function (on a click event) that "resets/cleans" the page from the interaction of the script? Or would I need to do a reload of the page?

How to reload an embedded tweet button

On website foradacopa.com and most websites I develop, we load partial page content into the current DOM to create a "one page" website experience. When these partial pages have embedded tweet buttons, the first page loaded will display the tweet button properly whereas subsequent pages loaded will not. This is because the Twitter code only does it's magic once, when the code is loaded initially.
To workaround this, you need to manually call a method that will do the magic to turn your static a tag into the iframe embedded button.
twttr.widgets.load()
I found this answer at https://dev.twitter.com/discussions/5642 from #kurrik Arne Roomann-Kurrik.

How can I remove an iframe within an iframe on an external web page like Pinterest's bookmarklet?

I am in the process of making a bookmarklet that allows users to highlight text on an external web page.
It runs JavaScript code that appends a JavaScript file from my server to the current web page that takes the title of the current web page, the URL of the current web page, and then the highlight text of the current web page. Finally, the user would click a button to submit the data to my web server to be saved into the database.
I have two ways of doing this: (1) have a popup with the data in the URL as parameters, or (2) to have an iframe inserted into the current web page with a form to submit the data.
In the one with the popup (1), the users browser auto blocks the popup for every domain. How do I get around this? It seems like Facebook share and twitter tweet buttons bypass the popup blocker though...
In the one with the iframe (2), I want to remove the iframe from the DOM after submitting data. However, if I'm on another domain, I get an error saying I am denied access because of origin policy something. I know it's possible because Pinterest's bookmarklet does this, it inserts an iframe then removes it from the current DOM.
I am looking for information on how these solutions work, so I can do something similar with my bookmarklet.
I resolved this by adding a post message callback after saving the data from the iframe.

Ajax page navigation '#' symbol

I'v paid attention to google's
https://mail.google.com/mail/?shva=1#inbox
Particularly to #inbox
This URL can be bookmarked, how this can be achieved?
Because it is being processed by Javascript via Ajax calls, that take in consideration what is inside the query string.
An example for locating in Javascript all # tags is:
urlquery=location.href.split("#");
So when first loading a page that contains that kind of links, the links on the page are generated containing # anchors that, when clicked, change the location address, but doesn't cause the page to reload, as it is an anchor to the current page. Then javascript hooks to the click event do the real job of loading the real content via Ajax.
But, since the address has changed on the location bar, you can store it on a bookmark. When that bookmark is loaded, it loads a barebone web with javascript to detect again which tags are on the address with #, and then load via Ajax the real content.
That's why, for example, the thumbnail of Twitter page on Google Chrome always shows an interface without messages, because when that thumbnail is generated, the Ajax still has not loaded the content.

Categories

Resources