Categories
Shopify

Shopify Cancelled Orders and Google Analytics

DEPRECATED: This code is no longer supported. Although it probably still works, please use at your own risk!

By default, when you cancel an order in Shopify, that transaction remains as positive revenue in your Google Analytics.

To “cancel” the transaction in Google Analytics you have to send a negated version of the transaction. To do this in Shopify you have to create a Webhook on Order Cancelled that hits a script (located on the same root domain as your store) that will call server side Google Analytics e-commerce code to negate the transaction.

Webhook Endpoint Dependencies

Details

Place the following code into a file that will act as your Order Cancelled Webhook endpoint (ie: www2.mydomain.com/webhooks/order-cancelled.php).

Make sure you:

  • Update the script to use your GA Account Id and Root Domain.
  • Change the path of autoload.php to point at your php-ga library
<?php
use UnitedPrototype\GoogleAnalytics;
require_once '../includes/autoload.php'; // Update to point at your php-ga install

$GA_AccountId = 'UA-********-1'; // Update with your GA account
$GA_domain = 'mystore.ca'; // Update with your root domain
$webhookContent = '';
// Read the webhook content
$webhook = fopen('php://input' , 'rb');
while (!feof($webhook)) {
  $webhookContent .= fread($webhook, 4096);
}
fclose($webhook);

if (!empty($webhookContent)) {
  // Convert the webhook content into an array
  $shopifyOrder = json_decode($webhookContent, true);

  // START GOOGLE ANALYTICS
  $tracker = new GoogleAnalytics\Tracker($GA_AccountId, $GA_domain);

  $visitor = new GoogleAnalytics\Visitor();
  $visitor->setIpAddress($_SERVER['REMOTE_ADDR']);
  $visitor->setUserAgent($_SERVER['HTTP_USER_AGENT']);
  $visitor->setScreenResolution('1024x768');

  $session = new GoogleAnalytics\Session();

  $page = new GoogleAnalytics\Page($_SERVER['REQUEST_URI']);
  $page->setTitle('Order Cancelled');

  $tracker->trackPageview($page, $session, $visitor);

  $transaction = new GoogleAnalytics\Transaction();
  $transaction->setOrderId($shopifyOrder['name']);
  $transaction->setAffiliation('');
  $transaction->setTotal(-$shopifyOrder['total_price']);
  $transaction->setTax(-$shopifyOrder['total_tax']);
  $transaction->setShipping(-$shopifyOrder['shipping_lines'][0]['price']);
  $transaction->setCity($shopifyOrder['billing_address']['city']);
  $transaction->setRegion($shopifyOrder['billing_address']['province']);
  $transaction->setCountry($shopifyOrder['billing_address']['country']);

  foreach ( $shopifyOrder['line_items'] as $product ) {
    $item = new GoogleAnalytics\Item();
    $item->setOrderId($shopifyOrder['name']);
    $item->setSku($product['sku']);
    $item->setName($product['title']);
    $item->setVariation('');
    $item->setPrice($product['price']);
    $item->setQuantity(-$product['quantity']);
    $item->validate();
    $transaction->addItem($item);
  }
  $transaction->validate(); 

  $tracker->trackTransaction($transaction, $session, $visitor);
  // END GOOGLE ANALYTICS
}
?>

Setup the Webhook in Shopify

In your Admin dashboard go to:

  • Settings > Notifications > Webhooks (at the bottom)
  • Create a Webhook
  • Event: Order Cancellation // Format: JSON // URL: The full url of your php file

Test

  • Google Analytics: Got to the Real Time > Content report
  • Shopify: Click “Send test notification” link beside your webhook.
  • Google Analytics: You should see a page request popup with your script name
  • Google Analytics: Wait a few hours and then (for transactions to register) and then go to Conversions > Ecommerce > Product Performance and you should see a sledge-hammer and wire-cutter products (the Shopify sample data) along with negative quantities and value.

Related Resources

Categories
Shopify

Add Color Swatches to Shopify Collections

NO LONGER SUPORTED: Please note that the code in this post is no longer supported. Although it probably still works, please use at your own risk.

Product Color Swatches

Below is some code for your Shopify Collection that will display color swatches for each product.

  • Install this on your Collections page within your Product Loop. If your theme has a product-thumbnail.liquid snippet install it there, (or alternatively in your product-loop.liquid snippet).
  • Create your own images for each color swatch and set the filename to the color (ie: black.gif, white.gif, green.gif, etc…)
{% for option in product.options %}
  {% if option == 'Color' %}
    {% assign index = forloop.index0 %}
    {% assign colorlist = '' %}
    {% assign color = '' %}
    {% for variant in product.variants %}
      {% capture color %}{{ variant.options[index] }}{% endcapture %}
      {% unless colorlist contains color %}
        <img src="{{ color | downcase | append: '.gif' | asset_url }}" alt="{{ color }}" width="16" height="16" />
        {% capture tempList %}{{colorlist | append: color | append: ‘ ‘}}{% endcapture %}
        {% assign colorlist = tempList %}
      {% endunless %}
    {% endfor %}
  {% endif %}
{% endfor %}

Also available on GitHub here: Shopify Color Swatches

Thank you to Curt and Mike Thorne for providing a more elegant solution to my initial one.