I am having a twitter tweet button, I am using knockout js, how can I track the number of events using universal google analytics?
Tweet
I have the below script in my knockout js which is not working
$('.is-voting-complete').on('click', '.twitter-share-button', function () {
gaTracker.send('event', 'Social', 'Twitter', 'Tweet');
});
I am guessing there is a iframe which twitter is incorporating , because of which the on click is not firing.
can somebody please help me with this
twittr is not defined because you have not included Twitters's widget.js. You should include the following before the closing body tag.
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
you can create a button like this
<a class="tw" target="_blank" href="https://twitter.com/intent/tweet? text=Check%20this%20out&related=episod&url=TheUrl"></a>
then bind google analytics function to the tweet event
twttr.ready(function (twttr) {
twttr.events.bind('tweet', function(e){
if(!e) return;
ga('send', 'social', 'twitter', 'tweet', theURL);
}
});
I have created a plugin called gasotracker. It works with twitter, but you are able to track other social events on your site.
Related
I want to add Google Analytics code to my AngularJS app.
I am using Ruby On Rails as a backend framework. The AngularJS application.html.erb file of Rails loads only on the first request.
So, I am putting google analytics code inside viewcontentLoad event.
$rootScope.$on('$viewContentLoaded', function () {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXX-Y', 'auto');
// ga('send', 'pageview');
ga('send', 'pageview', {'page': $location.path()});
});
I don't know if this is a valid way of inserting Google Analytics code or not.
This answer on Tracking Google Analytics Page Views with Angular.js may be helpful.
One of the comments suggests that this is a good way to do it:
$rootScope.$on('$routeChangeSuccess', ...)
I didn't find an answer to my question anywhere and I know nothing about javascript, so I can't figure it out myself.
If I have jQuery mobile website built so that every single page is in separate html file (single page template). May I use standard asynchronous Google Analytics code with it, or do I have to make modifications similar to those used in multi page template?
Would be very thankful if someone could answer this question.
Yes, you can use the standard Google Analytics code. You will however, need to "push" certain page views to Google Analytics because of the way jQuery Mobile handles page navigation.
For example, if you have a Contact form on your site at contact.html that, once submitted, goes to a process.php page, and then after completing, the user arrives at thank-you.html, you will need to call some JavaScript to "push" the pageview to Google Analytics.
For example, if your jQuery Mobile page element (data-role="page") has id="thank-you", then I'd use this:
<script type="text/javascript">
$(document).delegate('#thank-you', 'pageshow', function () {
//Your code for each thank you page load here
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_trackPageview', '/thank-you.html']);
});
</script>
UPDATE:
I would put this in your script.js file which is included in the head after you load jQuery and jQuery Mobile. This fires on each data-role="page" pageshow event, and is currently working on my live projects just fine.
$('[data-role=page]').live('pageshow', function (event, ui) {
try {
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
hash = location.hash;
if (hash) {
_gaq.push(['_trackPageview', hash.substr(1)]);
} else {
_gaq.push(['_trackPageview']);
}
} catch(err) {
}
});
As we know Twitter.com was down in yesterday(2012/07/26) some period of time. In that time my website home page somewhat unresponsive. The homepage was trying to load the twitter feed and failing, and thus other page elements in my site appears broken, like a jquery slider has trouble loading correctly, because its trying to load the twitter API.
Hove to fix this to homepage ignore twitter feed if the site notices that it is down, and displaying a short error notice in place of the feed?
I am using following customize twitter widget (got from here) to show latest 2 twitts in Home page.
<div id='twitter_div'>
<ul id='twitter_update_list'>
</ul>
</div>
<script type='text/javascript' src='http://twitter.com/javascripts/blogger.js'></script>
<script type='text/javascript'>
// to filter #replies in twitter feed
function filterCallback( twitter_json )
{ var result = [];for(var index in twitter_json)
{ if(twitter_json[index].in_reply_to_user_id == null) {result[result.length] = twitter_json[index]; }
if( result.length==2 ) break;}twitterCallback2(result); }
</script>
<script type='text/javascript' src='http://twitter.com/statuses/user_timeline/DUOBoots.json?callback=filterCallback&count=10'></script>
You should delay load your twitter feed. The rest of your page will load right away and if/when twitter goes down it won't block the rest of your page. It's good practice to do this anyway.
See https://dev.twitter.com/discussions/3369 for a discussion with some examples on using jquery to do this.
I'm trying to use the twitter API with library jsOAuth.
Full html
<div id="message">Loading..</div>
<script src="jsOAuth-1.3.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
var oauth = OAuth({
consumerKey: "-MY-KEY-",
consumerSecret: "MY-SECRET"
});
Updated
oauth.get("http://api.twitter.com/1/statuses/home_timeline.json?callback=?", success, failure);
function success(data){
$("#message").html("Sucess: " + data.text);
var timeline = jQuery.parseJSON(data.text);
console.log(timeline);
$.each(timeline, function (element){
console.log(element.text);
});
}
function failure(data) {
console.log("Throw rotten fruit, something failed");
$("#message").html("Error" );
}
</script>
Result
Full image
Questions
What am I doing wrong?
How can I use the twitter API in my PC.
If you can send me I would appreciate any examples.
Thank you all.
What am I doing wrong?
You are trying to make an AJAX request to Twitter. You are violating cross domain access policies - you cannot access data on the Twitter domain.
How can I use the Twitter API on my PC?
Pick one :
Use JSONP
Use a server-side proxy
Store your code on a file:// path, which removes the cross domain restrictions
Change your browser's security settings to allow this kind of access.
I have styled the unlikely ones in italic.
Also, as an experienced Twitter developer, I have one important note to make about your code: you're using Javascript to access the API. While using JS to do that isn't disallowed, using OAuth in javascript is very unsafe and your application will be blocked from the Twitter API if you used this code on a website.
Hope you are having a good time.
I am creating a website where when users Tweet a wordpress blog entry then they get points on the websites.
So basically, if a user Tweets that entry on his Twitter then we would give him some points to use on the website (not money). Although this thing is plausible with Facebook but not with Twitter in my knowledge.
I am willing to try to both ways by Twitter Tweet Button or TweetMeme Retweet Facility. However, I could not find a facility for a callback at neither of these.
I am implementing a similar functionality in Facebook and I can see the light at the end of the tunnel with using FBML JS SDK. HOwever, if something similar can be achieved with Twitter then it would be awesome.
Would love to hear more from you guys,
Kind Regards,
Khuram
They've fixed this with the intents function:
https://dev.twitter.com/pages/intents-events
twttr.events.bind('tweet', function(event) {
// Do something there
});
or for clicking
twttr.events.bind('click', function(event) {
var click_type = event.region;
});
using Twitters #anywhere api, you can set an onTweet function that does something when someone tweets.
here is a 6-step tutorial, see number 4
A default tweetBox can be called after the element with the comments class with the following snippet.
twttr.anywhere(function(twitter) {
twitter(".comments").tweetBox();
});
So if you want a custom label, content, and a callback when the tweet has been sent, use this code.
twitter(".comments").tweetBox({
label: 'What do you think about this article?',
defaultContent: '#nettuts ',
onTweet: function(plain, html){
// Actions when tweet is sent
}
});
opening tweet intent pop from JS code will send a callback. You need to put your tweet URL in herf of anchor tag
HTML:
<a target="_blank" href="https://twitter.com/intent/tweet?text=itismytext&url=http://google.com"> twitter share</a>
JavaScript:
$(document).ready(function(){
twttr.events.bind('tweet', function(event) {
console.log(event);
// OR
alert(JSON.stringify(event));
});
});