Shopify Integration for GoSquared

Note: The Ecommerce dashboard is now only included with our Enterprise Plans. Current Ecommerce customers can continue to use their dashboards with their existing plans. New customers should contact sinead@gosquared.com to learn more about our enterprise pricing options.


Instructions

This guide shows you how to manually install GoSquared by adding some extra code snippets to your Shopify theme template files.

This will enable you to use the following GoSquared features:

  • Analytics (Now, Trends, Ecommerce dashboards)
  • Live Chat
  • People CRM – however the Shopify checkout process means we cannot track sales conversions.


Note: The official GoSquared Shopify app (offered through the Shopify App Store) has been deprecated. Unfortunately due to limitations in the Shopify checkout process, we cannot offer the full GoSquared experience via the app and have made the difficult decision to stop supporting it.

 

Install GoSquared by updating your Shopify theme files

To start, you will need to create a GoSquared account and then follow the instructions below.

  1. Log into your Shopify account and open your Shopify Admin dashboard

  2. Go to Online Store > Themes.

  3. Click the three ellipses icon and the click 'Edit HTML and CSS'. Here on the left side you will see all the folders and templates you'll need to edit.

To add GoSquared to All Pages

  1. Go to Folder: Layouts > File: theme.liquid

  2. You will now need your GoSquared Project Token. In a new tab log into your GoSquared account. You will find it in your Project Settings here www.gosquared.com/setup/general Copy your GoSquared Project Token.

    1. Go back to your Shopify dashboard and paste the following script below the closing </head> tag into your theme.liquid template file, replacing the GoSquared-Project-Token with your Project Token:

      <script>
      
      !function(g,s,q,r,d){r=g[r]=g[r]||function(){(r.q=r.q||[]).push(
      arguments)};d=s.createElement(q);q=s.getElementsByTagName(q)[0];
      d.src='//d1l6p2sc9645hc.cloudfront.net/tracker.js';q.parentNode.
      insertBefore(d,q)}(window,document,'script','_gs');
      
      _gs('GOSQUARED–PROJECT–TOKEN');
      
      {% if customer.id %}
      
      _gs("identify", {
        email: "{{ customer.email }}",
        first_name: "{{ customer.first_name }}",
        last_name:  "{{ customer.last_name }}",
        phone: "{{ customer.default_address.phone }}",
        custom: {
          street: "{{ customer.default_address.street }}",
          city: "{{ customer.default_address.city }}",
          state: "{{ customer.default_address.province }}",
          stateCode: "{{ billing_address.province_code }}",
          postalCode: "{{ customer.default_address.zip }}",
          country: "{{ customer.default_address.country }}",
          countryCode: "{{ customer.default_address.country_code }}",
          totalSpent: "{{ customer.total_spent }}",
          allOrdersCount: "{{ customer.orders_count }}",
        }
      });
      {% endif %}
      
      </script>


To add GoSquared to Product Pages

  1. Go to Folder: Templates > File: product.liquid

  2. This will create Viewed Product and Added Product events.
    Important Note: This is dependent on the theme you're using; if your theme uses Shopify AJAX cart you will need to look for another solution.

  3. Include the below script as the last item in product.liquid 
     

    <script>
    
    _gs("event", "Viewed Product", {
      id: "{{ product.id }}",
      name: "{{ product.title }}",
      type: "{{ product.type }}",
      url: "{{ product.url }}",
      price: "{{ product.price | money_without_currency }}",
      priceMin: "{{ product.price_min | money_without_currency }}",
      priceMax: "{{ product.price_max | money_without_currency }}",
      priceVaries: "{{ product.price_varies | money_without_currency }}",
      variantsCount: "{{ product.variants.size }}",
      firstAvailVariant: "{{ product.first_available_variant.title }}",
      variantId: "{{ product.selected_variant.id }}",
      variantAvailable: "{{ variant.available }}",
      variantCompareAtPrice: "{{ variant.compare_at_price | money_without_currency }}",
      variantQuantity: "{{ variant.inventory_quantity }}",
      variantPrice: "{{ variant.price | money_without_currency }}",
      variantSelected: "{{ variant.selected }}",
      sku: "{{ variant.sku }}",
      variantTitle: "{{ variant.title }}",
      variantUrl: "{{ variant.url }}",
      variantWeight: "{{ variant.weight }}",
      vendor: "{{ product.vendor }}",
      available: "{{ product.available }}",
      optionsCount: "{{ product.options.size }}",
    });
    
    </script>
     
  4. If you'd like to also track the products added to a users cart as an event, you’ll just also need to include the below script. 

    <script>
    
    var cartButton =  document.getElementById(“your-cart-button-id“);
    
    function addProductEvent(){
      _gs("event", "Added Product", {
       id: "{{ product.id }}",
       name: "{{ product.title }}",
       price: "{{ product.price | money_without_currency }}",
       quantity: "{{ product.quantity }}",
       value: "{{ product.quantity }}*{{ product.price | money_without_currency }}"
     });
    };
    cartButton.addEventListener("click", _gs(addProductEvent))
    
    </script>
    
    

To add GoSquared to Category (Collection) Pages

  1. Go to Folder: Templates > File: collection.liquid Shopify refers to your Product Category pages as Collections. Adding the below script will create a Viewed Product event that tracks your product category pages.

  2. Add the script below as the last item in collection.liquid 
     

    <script>
    _gs("event", "Viewed Product Category", {
      category: "{{ collection.title }}",
      categoryUrl: "{{ collection.url }}",
      categoryProductCount: "{{ collection.all_products_count }}",
      {% if collection.current_type %} filteredType: "{{ collection.current_type }}", {% endif %}
      {% if collection.current_vendor %} filteredVendor: "{{ collection.current_vendor }}", {% endif %}
      defaultSortBy: "{{ collection.default_sort_by }}",
      referrerUrl: document.referrer,
      referrerPath: new URL(document.referrer).pathname,
      urlHref: window.location.href,
      urlPath: window.location.pathname,
      urlHash: window.location.hash
    });
    </script>

     

To add GoSquared to the Cart Page

  1. Go to Folder: Templates > File: cart.liquid Adding the script below will track a Viewed Cart event.

  2. Add the script below as the last item in cart.liquid 

    <script>
    
    _gs("event", "Viewed Cart", {
     itemCount: "{{ cart.item_count }}",
     totalPrice: "{{ cart.total_price | money_without_currency }}",
     totalWeight: "{{ cart.total_weight }}"
    });
    
    </script>
    
    

To add GoSquared to you Thank you Page

Due to the Shopify checkout flow, you will need to track a complete transaction differently.

  1. Log into your Shopify account and go to Settings > Checkout Page

  2. Scroll down to Order Processing and the "Additional content scripts" field.

  3. You will now need your GoSquared Project Token. In a new tab log into your GoSquared account. You will fine it in your Project Settings here www.gosquared.com/setup/general Copy your GoSquared Project Token.

  4. Include the following script in the "Additional content scripts" field replacing the GoSquared-Project-Token with your Project Token 
     

    <script>
    
    !function(g,s,q,r,d){r=g[r]=g[r]||function(){(r.q=r.q||[]).push(
    arguments)};d=s.createElement(q);q=s.getElementsByTagName(q)[0];
    d.src='//d1l6p2sc9645hc.cloudfront.net/tracker.js';q.parentNode.
    insertBefore(d,q)}(window,document,'script','_gs');
    
    _gs('GOSQUARED–PROJECT–TOKEN');
    
    {% if customer.id %}
    
    _gs("identify", {
      email: "{{ customer.email }}",
      first_name: "{{ customer.first_name }}",
      last_name:  "{{ customer.last_name }}",
      phone: "{{ customer.default_address.phone }}",
      custom: {
        street: "{{ customer.default_address.street }}",
        city: "{{ customer.default_address.city }}",
        state: "{{ customer.default_address.province }}",
        stateCode: "{{ billing_address.province_code }}",
        postalCode: "{{ customer.default_address.zip }}",
        country: "{{ customer.default_address.country }}",
        countryCode: "{{ customer.default_address.country_code }}",
        totalSpent: "{{ customer.total_spent }}",
        allOrdersCount: "{{ customer.orders_count }}",
      }
    });
    
    {% endif %}
    
    </script>

     

  5. Then include the GoSquared transaction tracking script underneath it:
     

    <script>
    
    var transactionID = "{{ order_number }}";
    
    _gs("transaction", transactionID, {
     track:true
    
    }, [
    
    {% for line_item in line_items %}
    {
      name: "{{ line_item.title }}",
      price: '{{line_item.price | money_without_currency }}',
      quantity: "{{ line_item.quantity }}"
    },
    {% endfor %}
    ]
    );
    
    </script>

     

With all of the above set up, you'll have GoSquared Analytics, GoSquared People and Live Chat activated and ready to go on your site. If you would like to have GoSquared Live Chat on your store pages you need to Turn On Chat by going to your Project Settings > Live Chat and toggling the slider "On" for `Enable Live Chat`.

Did you find this article helpful?