In my Facebook application I am displaying a message window using FB.ui { method: 'send' ...}. I would like to capture the list of recipients (stored in the 'recipitents []' hidden form field) as well as the message text in my application database.
Is there a way to do that?
Here's what I have come up with so far:
Dynamically set the onclick attribute in the DOM element (which corresponds to the Send button. So far I have been able to do that using the browser development tools (e.g. F12 in IE9) but not in code; it could be tricky since the dialog doesn't exist at load time). Unfortunately I haven't been able to define a Javascript function that was in the right scope (I thought there was only a global scope) for the onclick callback to find it.
Construct the Facebook Send dialog from more elementary building block (e.g., friend picker, send method invocation) so I 'own' the click event.
Clone the FB.ui() code and modify it to include additional parameters when calling the redirect url.
Require the user to include me in the To list (really only last resort), or default the 'to' field to the application's user id.
Finally, I expect to be able to call my web service from Javascript to record the message details in my application database.
I'm pretty sure this is not available via the API by design. The Send button operates in an iframe so browser security will prevent you from accessing its internal state via Javascript.
Some other methods (such as using FB.ui dialogs to post to the user's wall) provide a post ID in the callback and you can check this in the Graph API, but the Send button doesn't return anything like this.
For the Send button you can subscribe to the message.send event in the Javascript SDK and receive a callback with the URL which was sent, but not who it was sent to. ( https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/ - the event itself isn't currently listed there, but does exist)
I can't think of why you'd want to do this type of tracking, it seems like a use-case with very few policy compliant applications.
Related
i am embedding a form on a checkout page with an iframe and i am trying to take the price of the cart and have it automatically inputted into the amount field. the value of the cart variable seems to be $("span[data-test='cart-price-value']").innerText;
when i check it in the console, but i am confused on whether i should set the variable in the script that embeds the iframe or in my iframe html itself or whether or not i have to do both and add a jquery listener to the iframe html
and also i need to trim off the '$' from the variable, cause
$("span[data-test='cart-price-value']").innerText; returns a value with a dollar sign in front of it for example "$435.66" and i need it to be just "435.66" any help would be appreciated
There are a few things here -
Browsers have some pretty stringent restrictions about cross-origin iframes. You won't be able to communicate between the BigCommerce Checkout on one URL to an iframe hosted on a different URL - if their origins are different.
If you try to use JavaScript from the BC checkout page to set the value of a form input embedded in the iframe, you'll get a security warning in the console and the browser will dissallow it.
However, there is an API which allows for this communication - you can read more here:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
You're going to be sending and listening for custom "message" events and running code accordingly.
I'm not 100% on this, but from what it sounds like, you'll want to use Window.postMessage() to the iframe/origin hosting the external form, and send along the price you need to input.
On the page which serves the iframe/form code, you'll need an event listener to wait for this message to come in, and that's when you can have an event handler which will take the value passed along in the cross-origin message and modify the form input value.
Now, in terms of actually implementing this - it will also become more complicated depending on what type of Checkout Page you're hosting. Are you on Optimized One Page Checkout (The new one?) If so, you'll probably need Mutation Listeners, as the OPC is an external React Application, and you can't really hook into the internal state, you need to use mutation listeners to wait until each section (Customer Details, Shipping Details, Billing Details, payment Step) loads - as these are refreshed using internal React State which you can't access from the BC/stencil/cornerstone/blueprint scripts.
More details on that here:
https://medium.com/bigcommerce-developer-blog/the-complete-guide-to-checkout-customization-on-bigcommerce-6b566bc36fa9
If you're using an older version of checkout where you can manually modify the JS and HTML structure of the checkout that BC serves, you might not need this.
I have some problem while getting data from another site. In this case I want to get the reservation data from the booking engine site and they want to pass the data to me with Google Tag Manager. I don't really understand what I should do when they just need GTM code. What I should create in my server to get the data from the booking engine with Google Tag Manager ?
This is the illustrations:
I have two sites called sites1.com and sites2.com. In sites1.com I put the Google Tag Manager scripts to push form submit data like full name, last name, email, etc. After somebody submit the form I want to get the submited data in sites1.com to sites2.com with Google Tag Manager. My problem is how to get the data after somebody submited the form in sites1.com in my sites2.com ?
Please anybody knows how to resolve my problem . Thanks in advance .
Well if they implement your GTM from site2.com into site1.com all you need to do is:
Create a trigger for the submit button on the form (use the ID o class of the element and check for the that the Page URL contains site1.com/)
Create a tag where you want the information to be send
Scrap the fields with javascript or ask them to push to the dataLayer the information you need (in this case you can build the trigger based on this event)
And SUPER important: check all your triggers so no other tag fires on site1.com
2.1:
Im not sure if i get where you want this information to be stored but keep in mind GA does not accept PII. On the other hand if you want this in some DB you can just create and endpoint and send the information as parameters. Example:
site2.com/booking_info?field1={{DL variable}}
And just use a Custom IMG tag.
Ive made something like this using API Gateway, Lambda and DynamoDB and it took me 15 mins to set up. (just to give you perspective)
-- EDIT:
Ones you have the information avaliable you can send it to your database using two methods:
Using a HTML tag and making a request with javascript
Making a request with a custom image tag
On the past i ve just added the URL with parameters where you want the request to be made on an image tag and worked perfectly for me.
-- More info:
The custom image tag requests an image from a particular URL. The interesting part is that by making the request you’re actually transmitting information to a server. For example, if you request an image via URL https://www.example.com/something?parameter1=good¶meter2=123, the receiving server processes parameter1 and parameter2 and acts accordingly (e.g. registers those parameters as an event).
Source.
I would like to allow my users to share the the pages on my website, using a plug and play add-on such as 'AddThis'.
The problem with AddThis, is that I want to replace the value of the current page, with another page, that gets a unique hash as a query parameter, to identify the person who shared the link, in case anyone clicks the link and enters the website.
To obtain the unique hash, I need to call a RESTful resource.
What I need is:
An ability to have a callback for the share click event, where I will trigger the AJAX request to get the unique hash from the server(creating a post entity, which holds a reference to the user_id, and the shared object).
After the AJAX request completes, I need to set the share link.
Of course I need to repeat 1 and 2 for each new post \ user, and I need them to happen before the share dialog actually opens(with the default \ previous link)
This SO question demonstrates a similar issue, but it hasn't been correctly answered either.
As far as I know, the Facebook send dialog does not have any callback parameters (like the feed dialog). But, I would like to be able to store the recipients of that message in order to be able to control the access on it. Is that possible?
You can subscribe a call-back function via javascript on your page that has the send dialog
See: http://developers.facebook.com/docs/reference/plugins/send/ and http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
message.send - fired when the user sends a message using the send button. The response object passed into the callback function contains
the URL which was sent:
So according to the documentation you will only get the URL shared, so if you had multiple Send buttons on a page, you can tell which one was clicked.
For security and privacy reasons you cannot get the recipients of that message.
After a user fills in my "new" user form on "example-one.com", the "create" controller creates the record in the db. Then it does a redirect_to to an external site "payment-checkout.com". I have setup the Google Analytics code on both sites.
Google provides two functions _link and _linkByPost for use to use in any links or forms that go to your external domains. The problem is the user is being redirected by the controller action outside of the view and I cant use those two javascript functions to pass on the relevent G.A. info - what do i do?
Can anyone help?
The way _link works is by passing the Google Analytics cookies from your first domain via a query string to your second domain. The second domain, if configured correctly, will accept those URL parameters and apply them as cookie values for the purposes of tracking.
So, it shouldn't be difficult for you to apply your own version of the _link function.
Specifically, the _link function passes the following cookies:
__utma, __utmb, __utmc, __utmx, __utmz, __utmv and __utmk
Into a query string as such: ?__utma=87278922.614105561.1288923931.1294376393.1298325957.6&__utmb=87278922.1.10.1298325957&__utmc=87278922&__utmx=-&__utmz=87278922.1288923931.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)&__utmv=-&__utmk=72493274
So, all you need to do to replicate the _link function is, before you apply the server side redirect, grab the cookie values, and apply them as a query string on the URL you're redirecting to.
Now, that's not the only thing you'll need to do to get this working. The Google Analytics configuration on the payment site will need to be configured with _setAllowLinker set to true, as well as potentially disabling the domain hash and setting a particular domain name for the tracking cookies; it depends on your configuration. You can find out more about that in Google Analytics Cross Domain Tracking Guide.
#yc's approach looks like the best bet but if that doesn't work, I would suggest having your controller redirect the user to a "temp" page on your site itself and show some text like "Checking out....Please wait..." and using Javascript trigger the call to the "_link" function to redirect the user to the "payment-checkout.com" (again using Javascript).
I assume you're also tracking the page the user returns to and want to measure how many users you lose in the process in between?
My knowledge of the Google Analytics API is fairly limited, so maybe there's a better solution, but you could consider rendering a page containing the GA code and triggering the _link() function from there?
It might also be possible to perform an AJAX call on submitting the form (maybe using remote_form_for) and handling the GA redirect in an RJS-response:
page << "_gaq.push(['_link', 'http://example.com/test.html']);"
However, I'm not sure how well that would fit into your application.