From 74013c84a108b64e4bd801cc66e3f5050537b235 Mon Sep 17 00:00:00 2001 From: Alberto Vena Date: Thu, 9 Apr 2020 15:18:28 +0200 Subject: [PATCH] Guides: add basic Google Analytics integration This commits adds a new page that describes how to setup a basic integration with Google Analytics Enhanced Ecommerce with gtag.js. It's relevant because we archived solidus_trackers extension. It wasn't really providing any value since it was just matter of adding a file in your store. --- guides/data/nav/developers.yml | 6 ++ .../integrations/google-analytics.html.md | 66 +++++++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 guides/source/developers/integrations/google-analytics.html.md diff --git a/guides/data/nav/developers.yml b/guides/data/nav/developers.yml index 24df38f1f30..e5fdf378bcc 100644 --- a/guides/data/nav/developers.yml +++ b/guides/data/nav/developers.yml @@ -216,3 +216,9 @@ href: "/developers/views/custom-frontend.html" - title: "Override views" href: "/developers/views/override-views.html" + +- + - title: "Integrations" + dropdown: + - title: "Google Analytics" + href: "/developers/integrations/google-analytics.html" diff --git a/guides/source/developers/integrations/google-analytics.html.md b/guides/source/developers/integrations/google-analytics.html.md new file mode 100644 index 00000000000..4b3d5d8320d --- /dev/null +++ b/guides/source/developers/integrations/google-analytics.html.md @@ -0,0 +1,66 @@ +# Integrate Google Analytics into Solidus + +This guide explains how to set up Google Analytics Enhanced Ecommerce with gtag.js +in Solidus. Please note that the instructions below assume that all Solidus views have +been copied in the host application, as described in the [storefront +customization guide][storefront-customization-guide]. + + +Copy/paste the following code at `app/views/layouts/spree_application.html.rb`, +immediately after the `` tag. +Replace `GA_MEASUREMENT_ID` with the ID of the Google Analytics property to which +you want to send data. + +```html + + + +``` + +This will send a page view event to your Google Analytics account for each page visited +by your customers. + +To also send information about completed orders to Google Analytics, add the following +code at `app/views/spree/orders/show.html.erb`: + +```erb +<% if order_just_completed?(@order) %> + <% content_for :gtag do %> + <% gtag_purchase_items = [] %> + <% order.line_items.each do |line_item| %> + <% gtag_purchase_items.push({ + 'name': line_item.variant.name, + 'id': line_item.variant.sku, + 'price': line_item.total, + 'variant': line_item.variant.options_text, + 'quantity': line_item.quantity + }) %> + <% end %> + + gtag('event', 'purchase', { + "transaction_id": '<%= order.number %>', + "affiliation": '<%= current_store.name %>', + "value": '<%= order.total %>', + "currency": '<%= order.currency %>', + "tax": '<%= order.tax_total %>', + "shipping": '<%= order.ship_total %>', + "items": <%= raw gtag_purchase_items.to_json %> + }); + <% end %> +<% end %> +``` + +Please, use [Enhanced ecommerce with gtag.js][gtag-documentation] as reference if you want to change +information sent or you need to send other events to Google Analytics. + +[storefront-customization-guide]: ../customizations/customizing-storefront.html +[gtag-documentation]: https://developers.google.com/analytics/devguides/collection/gtagjs/enhanced-ecommerce +