与谷歌分析的社交互动

时间:2014-07-18 10:04:49

标签: javascript php facebook twitter google-analytics

我发现这个代码用于使用GA进行Facebook交互,它创建了自己的按钮:

<script src="//connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like></fb:like>
<script>
    FB.Event.subscribe('edge.create', function(targetUrl) {
       ga('send', 'social', 'facebook', 'like', targetUrl);
    });
</script>

我不想创建自己的按钮,而是希望使用GA与我的自定义Facebook链接进行社交互动。

<a href="my Facebook page URL" target="_blank"><img src="images/common/facebook.png" width="20" height="20" border="0" /></a>

我该怎么做??

我也可以为twitter使用相同的东西吗?

Twitter链接:

<a href="my twitter page url" target="_blank"><img src="images/common/twitter.png" width="20" height="20" border="0" /></a>

2 个答案:

答案 0 :(得分:2)

您绝对可以为自己的按钮执行此操作,您只需自己添加点击监听器。

要向GA发送社交匹配,您只需执行以下操作:

ga('send', 'social', {
  'socialNetwork': 'facebook',
  'socialAction': 'like',
  'socialTarget': 'http://example.com'
});

然后,当有人点击您的按钮时发送该匹配,您只需要添加一个事件监听器,如下所示:

// Find the button on the page and store a reference to it.
var myFacebookLikeBtn = document.getElementById('#my-facebook-like-button');

// Add a click listener to that button.
myFacebooklikeBtn.addEventListener('click', function() {
  ga('send', 'social', {
    'socialNetwork': 'facebook',
    'socialAction': 'like',
    'socialTarget': 'http://example.com'
  });
});

有关社交跟踪的详细信息,请查看此开发者指南: https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions

或社交点击的analytics.js字段参考: https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#social

答案 1 :(得分:1)

我在Facebook上使用了以下代码,例如按钮和Twitter分享按钮与Universal Google Analytics。请注意我添加的脚本,这些是必要的。另请注意标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" lang="en-US">
<head>
    <script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
    <script src='//connect.facebook.net/en_US/all.js'></script>
    <script src="jquery.twitterbutton.js" type="text/javascript"></script>
    <script>
      (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-xxxxxxxxx-2', 'abc.com');
      ga('require', 'displayfeatures');
      ga('send', 'pageview');
    </script>
    <style type="text/css">
    .social-interaction{display: inline-block;}
    .fb-interaction{float: right; margin-left: 25px; }
    .twitter-interaction{float: left;}
    </style>
</head>
<body>
<!-- ***********************************FACEBOOK LIKE BUTTON********************************************************* -->
    <div class="social-interaction">
        <div class="fb-interaction">
            <div class="fb-like" data-href="Your URL" data-width="20" data-layout="standard" data-action="like" data-show-faces="true" data-share="false"></div>
            <div id="fb-root"></div>
            <div style="display:none">
                <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fyour_facebook_page&amp;width=20&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=80&amp;appId=Your App ID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:20px; height:80px;" allowTransparency="true"></iframe>
            </div>
            <script>
            window.fbAsyncInit = function() {
            // Don't use my app id, use your own or it won't work!
             FB.init({appId: 'Your App ID', status: true, cookie: true, xfbml: true});
             FB.Event.subscribe('edge.create', function(href, widget) {
             // Do something, e.g. track the click on the "Like" button here
             // ga('send', 'social', 'facebook', 'like', targetUrl);
             alert('Thank you to like our page.');
             });
            };
            </script>
        </div>
<!-- *********************************TWITTER TWEET BUTTON********************************************************** -->
        <div class="twitter-interaction">
            <script type="text/javascript">
            $(document).ready(function () {
              $('#twitterbutton-example').twitterbutton({
               user:'',
               title:' ',
               ontweet:function(response){      
                // Do something, e.g. track the click on the "Like" button here
                // ga('send', 'social', 'twitter', 'tweet', targetUrl);
                alert("ontweet");
                ga('send', 'social', 'twitter', 'tweet', "Your URL");
               },
               lang:'en'
              });

            });
            </script>
            <div id="twitterbutton-example"></div>
        </div>
    </div>
</body>
</html>