Facebook share link, remote iframe click event capture - facebook

I am working from last 24 hours to accomplish this, i can't capture the fb share link widget iframe click event, i need to perform an operation over it. If its not possible due to cross domain, even then i need some logic to get a click event triggered on the parent div of this iframe, parent div is in my DOM element.

Related

Use facebook tracking pixel for registration success that does not redirect to success page

How do I set a facebook pixel event to track registration completion when my registration form completion redirects to my index page not to a registration success page?
Should I use a standard event or a custom event to achieve this, or, do I have to create an intermediate page that the registration form directs to and then redirects to index page?
Fire the Facebook Pixel event when the user clicks on the form submit with 'click' event listener. Standard versus Custom events is a separate issue, but I suggest sticking with Standard events where you can.
https://developers.facebook.com/docs/facebook-pixel/advanced/
Stephen, you provided too few information.
Richy is right that in your case if you can't control where your user lands after submitting the form you should use onClick event to send a pixel event. You can easily validate the form in the code of the onClick event and send it when you're sure data is according to your expectations. You can even do additional requests to your back-end to check the data.
If you can change how your web-site work you can make a landing page where you'd fire an event if all the processing went right.
If you can also easily do it on your index page by loading it with some parameter in the URL that indicates it is visited after the form was submitted. There you can have a simple JS code snipped with condition in it to fire a pixel event if URL parameter is present or do it with Google Tag manager which is even simpler.
There are a couple of good standard events you can use like Subscribe or Submit Application, review them here: https://developers.facebook.com/docs/facebook-pixel/reference#standard-events
You have countless options depending on what level of changes you can do to the site, you coding skills, CMS you use and precision you need.

How to access input field in TinyMCE 5 URL dialog

I'm porting a TinyMCE 3 installation to version 5. I set up a toolbar button that opens a dialog that contains a custom page and is therefore loaded using the new windowManager.openUrl method. I have some footer buttons, too, and, of course, an onAction( dialogApi, details ) handler that is invoked when a button is clicked. details.name contains the name of the button that was clicked so I can react on every click individually.
It seems, when a regular dialog is used, I configure every input field in my plugin.js file and retrieve its value through the getData method of first param that in passed into my onAction handler. This method does not exist in my dialogApi for the URL dialog.
My iframe/dialog contains a dropdown and I want to insert the selected value into the editor instance when a dialog footer button is clicked. I understand I can use postMessage to send information from the iframe to the plugin but that's not what I want.
How can I access input fields in the dialog, when a button is clicked and my dialog was opened through openUrl? How do I access the document in the dialog's iframe? this seems to be the JavaScript object I passed into openUrl. document is the page where the editor is embedded.
I've made a demo that shows two different ways of getting the data from user inputs in an iframe dialog:
https://codesandbox.io/embed/tinymce-dialog-openurl-demo-fpfew
This blog post is also an excellent resource for working with iframe dialogs in TinyMCE:
https://www.martyfriedel.com/blog/tinymce-5-url-dialog-component-and-window-messaging
The first method in my demo uses a button in the HTML of the iframe itself. That button collects user data and uses postMessage to send that data back to the TinyMCE editor.
As you can see, the process is a little more complex using the footer buttons as opposed to the "in iframe" button. Essentially, the footer button sends a message to the iframe in the dialog asking the iframe to collect and insert user data into TinyMCE.
When using an iframe, you have to respect the browser security policy, so most times you can't interact with an iframe directly (the exception being if the iframe uses the same domain). Here's some more information about iframe security policy:
https://security.stackexchange.com/questions/67889/why-do-browsers-enforce-the-same-origin-security-policy-on-iframes
This also means that TinyMCE has no way of knowing what's inside the iframe like it does with a TinyMCE dialog, so the data needs to be fetched "manually". With that in mind, if it's a cross origin request (different domain) there's no way to access the iframe content without using postMessage.
The getData method mentioned works with TinyMCE dialogs because everything in the dialog is a TinyMCE component. TinyMCE components have a custom concept of values/states that getData can access to return data.
When you use a URL dialog, the dialog no longer uses TinyMCE components so it isn't able to collect the data for getData, hence it the method doesn't exist. That's why you have to manually get the data needed from whatever elements are in the URL dialog, and send them back to TinyMCE using postMessage.

Track form conversions confirmation page URL is the same as the form

I'm trying to track form completions on a page where the form's URL is the same as the confirmation page.
Form Page
Does anybody know if this can be done with Google Tag Manager/Google Analytics please?
Completion page
Simply tracking clicks of the Submit button will result in false positives because sometimes people will not type the security code correctly.
Is there a tracking code of some sort that can be added to the confirmation page, so that each time it loads the count goes up one?
I'm grateful of any help you can provide.
Thanks!
You can use the built-in visibility trigger - e.g. as soon as a link element with the link back to the homepage becomes visible you let the trigger fire. Specifics depend on the CSS id or class for that link (if any, else you'd have to test the click text).
In the visibility trigger you might have to enable "listen for DOM changes" if the confirmation message is loaded per Ajax (as opposed to just have their CSS display property set to 'none'.

Fancybox 2: Any way of opening iframe without showing it?

I am using Fancybox 2 for my web application. I read its online documenation, but failed to find a way of opening iframe without showing it to a user.
The reason for my inquiry is that when a regular page is loaded, I would like to make a Fancybox iframe get loaded too without a user's notice. When the user clicks on a link on the page that will trigger Fancybox to show the iframe, I would like to make it simply visible. I hope this would greatly improve user experience in terms of speed.
Any ideas or links would be really appreciated.
You could, for example, simply create hidden iframe element and display it as any other "inline" element using fancyBox.

Want to share a particular block or div from my entire page into facebook

I have a requirement that in a webpage I have multiple block of content which is wrapped inside individual DIV. Each block needs to have a share to facebook button.
Did many researches but couldn't find a solution. Please can anyone give me a suitable code or idea how I can share particular blocks/content wrapped inside a div into facebook.
For e.g.
I have three DIV in my page and each DIV has share button, when user clicks on any of the share button the respective DIV is shared.
Is there any solution to this requirement or whether is it possible to do. Any kind of suggestions are widely accepted.
Check out this HyperArts tutorial on adding a Share Button to an iFrame tab - you use the exact same code for your webpage. You will be using the Facebook JavaScript SDK.
At the end of the tutorial it explains how to modify it to allow for multiple Share buttons on one page. You just need to add a unique identifier for each one.