Social Analytics

[ccorda]

Since we already use quickShare, something like this might get us analytics out of the box:

var socialTracking = function(){
    // Using GA social interactions
    // https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions
    var sharePage = 'window.location.href';

    $("a[data-qs-service='facebook-share']").click(function(e) {
        var url = $(this).attr("data-qs-url") || sharePage;
        if (typeof ga !== 'undefined'){
            ga('send', 'social', 'Facebook', 'Share', url);
        }
    });

    $("a[data-qs-service='twitter']").click(function(e) {
        var url = $(this).attr("data-qs-url") || sharePage;
        if (typeof ga !== 'undefined'){
            ga('send', 'social', 'Twitter', 'Share', url);
        }
    });

    $("a[data-qs-service='linkedin']").click(function(e) {
        var url = $(this).attr("data-qs-url") || sharePage;
        if (typeof ga !== 'undefined'){
            ga('send', 'social', 'LinkedIn', 'Share', url);
        }
    });

    $("a[data-qs-service='pinterest']").click(function(e) {
        var url = $(this).attr("data-qs-url") || sharePage;
        if (typeof ga !== 'undefined'){
            ga('send', 'social', 'Pinterest', 'Share', url);
        }
    });

    $("a[data-qs-service='mailto']").click(function(e) {
        var url = $(this).attr("data-qs-url") || sharePage;
        if (typeof ga !== 'undefined'){
            ga('send', 'social', 'Email', 'Share', url);
        }
    });
};

/cc @jeffgreco @kylehotchkiss @yuvilio

[ccorda]

Quick Share seems to be something we're getting away from, so I propose two things:

1) We use a partial to to house share buttons. A single twig file that accepts passed in variables for tweet/link, then falls back to defaults. A single layout should suffice on most sites, but on some sites where we need multiple slightly different layouts, we should have some flexibility so that the logic can be reused with slightly different markup.

2) For analytics, we include autotrack paramaters and implement #35 so that the attributes are easily adjustable.

[kylehotchkiss]

Big :+1: from me on this. Can we have GV for default tweet?

[ccorda]

@kylehotchkiss do you think a GV default.tweet works in this context? Here is what I'm thinking:

{# First setup our variables #}

{% if not params_tw %}
    {% set params_tw = "?utm_source=twitter&utm_medium=social" %}
{% endif %}

{% if not params_fb %}
    {% set params_fb = "?utm_source=facebook&utm_medium=social" %}
{% endif %}

{% if post.body_share_url %}
    {% set fb_link = post.body_share_url ~ utm_fb %}
{% else %}
    {% set fb_link = post.link ~ utm_fb %}
{% endif %}

{% if not share_url %}
    {% if post.share_url %}
        {% set share_url = post.share_url %}
    {% else %}
        {% set share_url = post.link %}
    {% endif %}
{% endif %}

{% if not tweet %}
    {% if post.tweet %}
        {% set tweet = post.tweet %}
    {% else %}
        {% set tweet = share_url ~ params_tw %}
    {% endif %}
{% endif %}

{% set tw_link = "https://twitter.com/intent/tweet?text=" ~ tweet|url_encode %}

{% set fb_link = "https://www.facebook.com/sharer.php?u=" ~ share_url|url_encode ~ params_fb %}

{# If you need to custom style, you can pass in `share_classes` #}
{# Possible TODO, allow for custom GA options beyond label #}

<div class="share {{ share_classes }}">
    <a
        href="https://www.facebook.com/sharer.php?u={{ fb_link }}"
        target="_blank"
        ga-on="click"
        ga-event-category="Social Share"
        ga-event-action="Facebook Share"
        ga-event-label="{{ share_label }}"
    >
        <i class="fa fa-share-fb" title="Facebook"></i>
    </a>
    <a
        href="{{ tweet }}"
        target="_blank"
        ga-on="click"
        ga-event-category="Social Share"
        ga-event-action="Twitter Share"
        ga-event-label="{{ share_label }}"
    >
        <i class="fa fa-share-tw" title="Twitter"></i>
    </a>
</div>

[kylehotchkiss]

Default tweets should be just text or hashtags - the url can just be a post.permalink - in your example, it looks like custom tweet is anticipating a URL and not text.