与谷歌分析的社交互动答案

【问题标题】：Social Interaction with google analytics与谷歌分析的社交互动
【发布时间】：2014-09-09 10:29:01
【问题描述】：

我发现这段代码用于使用 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 上使用同样的东西吗？

推特链接：

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

【问题讨论】：

标签： javascript php facebook twitter google-analytics

【解决方案1】：

你绝对可以为你自己的按钮做，你只需要自己添加点击监听器。

要将社交点击发送到 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

【讨论】：

谢谢，但我对 socialTarget 应该使用哪个 url 感到困惑。应该是我的网站网址还是我的 Facebook 页面网址？
socialTarget 值可以是您想要的任何值。通常，它将是与他们单击的任何按钮相关联的 URL。例如，如果它是用于在您的网站上分享文章的推文按钮，则 socialTarget 值很可能是该文章的 URL。如果它是您整个网站（而不仅仅是一个页面）的 Facebook 类似按钮，那么 socialTarget 可能只是您的域或您的主页 URL。

【解决方案2】：

我已将以下代码用于 Facebook like 按钮和 Twitter 分享按钮以及 Universal Google Analytics。请注意我在 head 中添加的脚本，这些是必要的。还要注意标签。

<!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>

【讨论】：