The following code examples demonstrate how to handle, log, and modify AddToAny events that fire on AddToAny actions.

Handling the share

Dispatched events include ready and share.

The share event passes a data object with four properties: node (clicked element), service (service name such as Copy Link), serviceCode (service code name such as copy_link), title (page or image title), and url (page URL).

Two more properties are included during image sharing: media (image URL), mediaNode (image element when applicable).

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_mastodon"></a>
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>

<span id="events_demo"></span>

<script>
// A custom "onReady" handler for AddToAny
function my_addtoany_onready() {
    events_demo.innerHTML = 'AddToAny is ready!';
}

// A custom "onShare" handler for AddToAny
function my_addtoany_onshare(data) {
    events_demo.innerHTML = 'Shared &quot;<a href="'
        + data.url
        + '">'
        + data.title
        + '</a>&quot; to '
        + data.service
        + '!';
}

// Setup AddToAny "onReady" and "onShare" callback functions
var a2a_config = a2a_config || {};
a2a_config.callbacks = a2a_config.callbacks || [];
a2a_config.callbacks.push({
    ready: my_addtoany_onready,
    share: my_addtoany_onshare,
});
</script>

<script async src="https://static.addtoany.com/menu/page.js"></script>

In Drupal, add the following JavaScript code to your "Additional JavaScript" box in Configuration > Web services > AddToAny > Additional Options.

In WordPress, add the following JavaScript code to your "Additional JavaScript" box in Settings > AddToAny.

a2a_config.callbacks.push({
    share: function(data) {
        // Do what you need with the data object here
        console.log(data);
    }
});

Tip: Event logging can be used to track AddToAny with analytics software like Segment, Adobe Analytics (Omniture), Piwik, Webtrends, and more.

Note: Google Analytics integration is automatically enabled for sites that use Google Analytics directly. A setup process is only necessary if you use Google Analytics through Google Tag Manager.

Modifying the share

To modify (or cancel) a share event, return an object from a custom "onShare" handler. Several properties are recognized on the returned object.

A url property sets a new value for the shared URL.

A title property sets a new value for the shared title.

A stop property that is true cancels the share event, which can be useful for handling a failed requirement.

The following example immediately adds a fragment identifier (#3.1459) to the shared URL.

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_mastodon"></a>
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>

<script>
// A custom "onShare" handler for AddToAny
function my_addtoany_onshare(share_data) {

    // Some fragment identifier
    var hash_pi = '#3.1459';
    // The shared URL
    var old_url = share_data.url;
    // Initialize new shared URL
    var new_url = old_url;

    // Add fragment identifier if not already added to the shared URL
    if ( old_url.indexOf(hash_pi, old_url.length - hash_pi.length) === -1 ) {
        new_url = old_url + hash_pi;
    }

    // Modify the share by returning an object
    // with a "url" property containing the new URL
    if (new_url != old_url) {
        return {
            url: new_url,
        };
    }

}

// Setup AddToAny "onShare" callback function
var a2a_config = a2a_config || {};
a2a_config.callbacks = a2a_config.callbacks || [];
a2a_config.callbacks.push({
    share: my_addtoany_onshare,
});
</script>

<script async src="https://static.addtoany.com/menu/page.js"></script>

a2a_config.callbacks.push({
    share: function(share_data) {
        // Some fragment identifier
        var hash_pi = '#3.1459';
        // The shared URL
        var old_url = share_data.url;
        // Initialize new shared URL
        var new_url = old_url;

        // Add fragment identifier if not already added to the shared URL
        if ( old_url.indexOf(hash_pi, old_url.length - hash_pi.length) === -1 ) {
            new_url = old_url + hash_pi;
        }

        // Modify the share by returning an object
        // with a "url" property containing the new URL
        if (new_url != old_url) {
            return {
                url: new_url,
            };
        }
    },
});

Tip: You can modify templates & service parameters during the share event.