I want to use twttr.events.bind(‘click’, function()) to record tracking value on Twitter Follow button, but met one issue


#1

The description of the issue is, if we want to add tracking function to Twitter button, we try to use the Twitter’s api twttr.events.bind(‘click’, function()) (please refer to https://dev.twitter.com/docs/intents/events see the detail) to catch the click event on Follow button and enable the tracking, it worked and the tracking value can be returned successfully, but our issue is: if we use article & gallery page (article & gallery contain Twitter button),also use Twitter button on NetworkHeader, like this:
If we click the button on header, it will call tracking function and send tracking value, but after clicking the button on header, then click the button in article or gallery, it won’t return any tracking value, our question is: we are not able to differentiate the relative tracking value on header or article, which mean if we click the button on header, it will call twttr.events.bind and enable tracking function, but in the same HTML, the button on article also will run the twttr.events.bind, although we use independent JS file which is only for Twitter button on header, we are not able to control or modify the Api from Twitter, no matter which button(in article or on header) we click, it always will call the first JS file loaded which contains twttr.events.bind function, the other Facebook button in the same HTML also will run the function, that mean if we click the other Twitter button in article or gallery, the tracking value is wrong, it will return header button’s tracking value.
Are you able to do me a favor if there is any way to resolve this issue?


#2

You should be able to check event.target to see which node in the page was clicked. From there, then you should be able to pull the appropriate tracking value.


#3

Thanks for your advice, I’d appreciate it very much if you are able to give me some simple code of how to use twttr.events.bind(‘click’, function()) and event.target


#4

Hi,
I think twttr.events.bind does not work!

Here is my code:

Tweet Follow

No event is shown in the console log nor in alert

I also tried several other snippets of code also loading widgets.js asynchronously but I can’t find any piece of
working code.
Can please twitter inc. provide a full example?
Thanks


#5

Sorry,
It was my fault, I tried to run the example from file instead of host it on a web server, but…
I’m a javascript newbie so I don’t understand why I should use a web server. Isn’t javascript interpreted client side?


#6

No reply?


#7

I don’t know exactly why it’s the case, but I believe it has something to do with web browser code execution policies and usage of the HTTP protocol (the web) rather than just plain file I/O of a HTML document


#8

Yeah, there are actually greater security restrictions on files run locally than HTTP hosted files. Basically, you wouldn’t want an HTML file opening up an Ajax request to sensitive files on your hard drive.


#9

Hi @somespikes,

In addition to @episod’s and @kurrik’s points below about various security permission issues that occur when running on file:// URLs, the specific reason that Web Intent events don’t work on a file: protocol is when you bind an event, we dynamically load some extra script to enable cross-frame communication. Because Twitter now supports SSL (HTTPS) everywhere, we load additional scripts using a protocol-agnostic // URL. This causes the browser to load the resource (hubclient.js) using the same protocol as the host page.

On HTTP or HTTPS, this means it matches the security of the page you’re on, and prevents our script causing SSL mixed-content errors in browsers. The flipside is that on a file: URL the browser attempts to load file://platform.twitter.com/, which of course doesn’t exist.

At some point in the indistinct future we’ll probably fix this, because I appreciate it’s annoying that this situation breaks, but it requires trawling through the plumbing of our script manager and it’s not a top priority for the time being.

Something which should help you in the meantime: You don’t need a full on web server to run your page locally over HTTP. If you’re running on a Mac or other unix-based machine, you can run a single line of python from the directory where your page is being developed:

python -m SimpleHTTPServer

Then, open localhost:8000 in your browser.

On Windows, you can probably do the exact same thing if you have Python installed, or I’ve seen people recommend TinyWeb http://www.ritlabs.com/en/products/tinyweb/ for things like this.

Hope that helps. Please get in touch (here, or @benward on Twitter) if you need any other hints.

Ben


#10

Thanks @episod, @kurrik.

Ben, thanks for the detailed answer. Now, I finally understand the “issue”.

I thought it was something related to events but I couldn’t really understand what. Moreover I had a feeling it was something related to the protocol; as you can see in my example above, I expressly declare:

instead of using the snippet (protocol agnostic) Twitter suggests here: https://dev.twitter.com/docs/intents/events i.e. ... js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); .. but I couldn't imagine it was because HTTP/HTTPS Finally, I appreciate your suggestion to use python or tinyweb, I have apache at hand, but something simpler is welcome :-) Cheers Davide

#11

In here…
Is it possible to send some values to the function like current user, and event_id which caused to fire the function…


#12

yah harry it is possible


#13

oh thanks … heheh… how does it help me…

please tell me how…

or here is the complete scenario…


#14