Social sharing is tremendously important for driving traffic. Equally important is keeping track of those social shares to measure engagement, effectiveness and as a way to plan future content. With Logic Hop you can go one step further and track social shares for content personalization. Imagine knowing if a returning user has shared your site, post or photos – Now you can AND personalize their content based on their actions.

While there are a number of ways to provide social sharing, we’re currently using the Monarch Social Share plugin from Elegant Themes. Monarch is a great tool with a lot of awesome features like adding multiple platforms with a few clicks and customizing share buttons and locations. The one feature Monarch doesn’t have is Javascript Callbacks.

Why Javascript Callbacks?

Just like telling a friend you’ll call them back later, Javascript Callbacks are functions that are called after an action is performed. In our instance, we wanted Monarch to let us know (call us back) after a user has performed a social share action so we can set a Logic Hop Goal. Until now, this wasn’t possible…

Enter Callbacks for Monarch by Logic Hop!

We’ve built and released a free WordPress plugin that adds callbacks for Monarch (Download it free). With our plugin, every time a Monarch social share action is performed, a Javascript function named logichop_monarch_callback() is called and the function receives parameters detailing the specifics of the shared event.

With the plugin enabled, include the following code on your site:

<script>
  function logichop_monarch_callback (stats) {
    console.log( 'logichop_monarch_callback' );
    console.log( stats );
    // Your Javascript code here
  }
</script>

The above code sample will output ‘logichop_monarch_callback’ and event details in the browser Javascript console.

The values returned are:

• action
  • The action performed. Typically ‘share’, ‘follow’ or ‘media’.
• network
  • The network for which the action was triggered. ‘Facebook’, ‘Twitter’, etc.
• media_url
  • Image URL when media is shared.
• post_id
  • ID of the page or post where the button was triggered.

A typical result would be:

  action: "share"
  location: "sidebar"
  media_url: ""
  network: "linkedin"
  post_id: 28

Tracking Social Shares with Logic Hop

Tracking social shares with Logic Hop is easy – Simply create a Goal and use the auto-generated Javascript code.

To trigger the above Goal for any social share action, include the following Javascript on your page:

<script>
  function logichop_monarch_callback (stats) {
    logichop_goal(193);
  }
</script>

To triggered the goal only after a Facebook share, you would use the following:

<script>
  function logichop_monarch_callback (stats) {
    if (stats.network == 'facebook') logichop_goal(193);
  }
</script>

Congratulations – You’re can now track social shares!

Personalizing Content

With the Goal set, we can track users who have shared content and use Logic Hop Conditions to personalize content during their visit. A simple Condition would be to check if the Goal has been set.

In this example we’ve enabled Conditional CSS allowing us to wrap any content in an HTML element with the class .logichop-shared-share-tracking-tutorial or .logichop-not-shared-share-tracking-tutorial. This first class will display the element if the user has shared this post, the second will display the element if the user has not shared.

Note: In the Goal sample, we’re checking for any shared content. For this example, we’ve created a Goal specific for when this tutorial is shared.

See it in action below: