---
title: "Breaking the Data Silos with a Google Looker Studio Custom Connector"
description: "A detailed guide for developers on building custom Google Looker Studio connectors using Google Apps Script to integrate any external API data, with working examples for Shopify Orders."
slug: "google-looker-studio-custom-connector-shopify"
date: "2025-04-04"
author: "Jayesh Jain"
category: "Data Visualization"
tags: ["Google Looker Studio", "Apps Script", "Custom Connector", "Shopify API", "Data Visualization"]
keywords: "Google Looker Studio Connector, Apps Script, Custom Connector, Shopify API Integration, Data Visualization, Data Studio, Shopify Orders, Looker Connector"
excerpt: "Learn how to use Google Apps Script to build a custom Looker Studio connector. We cover the core functions (getConfig, getSchema, getData) and provide a practical example for fetching and flattening Shopify Order data."
featuredImage: "/blog/looker-studio-connector-banner.png"
cta: "We help companies build custom AI and data connectors - from analytics pipelines to Looker Studio dashboards."
ctaDescription: "Get a free consultation to see how we can automate your reporting workflows."
---

# Breaking the Data Silos with a Google Looker Studio Custom Connector

In today’s data-driven world, businesses need insights from every system - not just the ones with built-in integrations. Platforms like **Shopify**, **HubSpot**, or custom CRMs often hold valuable data, but without native connectors, it remains siloed and hard to analyze.

This guide shows you how to build a **custom Looker Studio connector using Google Apps Script**. With it, you can seamlessly bring **Shopify Orders** into Looker Studio dashboards, giving you real-time visibility into metrics such as **order totals**, **financial status**, and **fulfillment progress** - all without manual exports or complex pipelines.

---

### 1. Understanding the Looker Studio Connector Architecture

Each connector must implement three core functions:

| Function | Purpose | Called When |
|-----------|----------|-------------|
| **getConfig()** | Defines user input fields (e.g., API Key, Store URL). | When user adds connector. |
| **getSchema()** | Defines data fields and types. | When connector configuration is saved. |
| **getData()** | Fetches data and returns rows in tabular format. | When charts load or refresh. |

---

### 2. Base Connector Structure

```javascript
/**
 * @fileoverview Looker Studio Custom Connector Template
 * Deploy as a Google Apps Script Web App.
 */

// 1. getConfig - prompts user for input
function getConfig(request) {
  return {
    configParams: [
      {
        name: 'apiKey',
        displayName: 'Shopify API Key',
        helpText: 'Private App Access Token',
        text: true
      },
      {
        name: 'storeName',
        displayName: 'Shopify Store Name',
        helpText: 'Example: my-store-name',
        text: true
      }
    ]
  };
}

// 2. getSchema - defines structure of Shopify Orders
function getSchema(request) {
  var cc = DataStudioApp.createCommunityConnector();
  var fields = cc.getFields();
  var types = cc.FieldType;

  // Order ID
  var orderId = fields.newDimension()
      .setId('orderId')
      .setName('Order ID')
      .setDescription('Unique identifier for the Shopify order')
      .setType(types.TEXT);

  // Created At
  var createdAt = fields.newDimension()
      .setId('createdAt')
      .setName('Order Created At')
      .setDescription('Date and time when the order was created')
      .setType(types.YEAR_MONTH_DAY);

  // Total Price
  var totalPrice = fields.newMetric()
      .setId('totalPrice')
      .setName('Total Price')
      .setDescription('Total order amount in USD')
      .setType(types.CURRENCY_USD);

  // Financial Status
  var financialStatus = fields.newDimension()
      .setId('financialStatus')
      .setName('Financial Status')
      .setDescription('Status of payment for the order')
      .setType(types.TEXT);

  // Fulfillment Status
  var fulfillmentStatus = fields.newDimension()
      .setId('fulfillmentStatus')
      .setName('Fulfillment Status')
      .setDescription('Current fulfillment status of the order')
      .setType(types.TEXT);

  // Set default metric and dimension
  fields.setDefaultMetric(totalPrice.getId());
  fields.setDefaultDimension(createdAt.getId());

  return { 'schema': fields.build() };
}

// 3. getData - fetches and returns API data
function getData(request) {
  var apiKey = request.configParams.apiKey;
  var storeName = request.configParams.storeName;
  var apiResponse = fetchExternalData(apiKey, storeName);
  var flatRows = processApiResponse(apiResponse);

  var data = flatRows.map(function(row) {
    var values = [];
    request.fields.forEach(function(field) {
      values.push(row[field.name]);
    });
    return { values: values };
  });

  return { schema: request.fields, rows: data };
}
```

---

### 3. Fetching Shopify Orders

```javascript
function fetchExternalData(apiKey, storeName) {
  var apiVersion = '2024-04';
  var url = 'https://' + storeName + '.myshopify.com/admin/api/' + apiVersion + '/orders.json?status=any&limit=50';

  var options = {
    method: 'GET',
    headers: {
      'X-Shopify-Access-Token': apiKey,
      'Content-Type': 'application/json'
    },
    muteHttpExceptions: true
  };

  try {
    var response = UrlFetchApp.fetch(url, options);
    var json = JSON.parse(response.getContentText());
    return json;
  } catch (e) {
    throw new Error('Error fetching Shopify data: ' + e);
  }
}
```

---

### 4. Flattening Nested Shopify Data

Shopify’s API returns nested JSON (orders → line_items). Looker Studio only supports **flat tables**, so we must flatten the data.

```javascript
function processApiResponse(apiResponse) {
  if (!apiResponse || !apiResponse.orders) return [];

  var flatRows = [];

  apiResponse.orders.forEach(function(order) {
    flatRows.push({
      orderId: order.id,
      createdAt: order.created_at,
      totalPrice: parseFloat(order.total_price),
      financialStatus: order.financial_status,
      fulfillmentStatus: order.fulfillment_status
    });
  });

  return flatRows;
}
```

---

### 5. Testing the Connector

1. Open [Google Apps Script](https://script.google.com/).
2. Paste the code and deploy as a **Web App** (accessible to “Anyone with the link”).
3. Go to **Looker Studio → Create → Data Source → Build Your Own Connector**.
4. Paste your script’s deployment URL.
5. Configure API Key and Store Name → Connect → Add to Report.

You’ll now see **Shopify Orders live in Looker Studio**.

---

### 6. Bonus: Adding Date Range Support

Add this snippet to your **getConfig()** for selecting timeframes:

```javascript
{
  name: 'startDate',
  displayName: 'Start Date',
  dateRange: true
}
```

Then use **request.dateRange** inside **getData()** to filter orders.

---

### 7. Example Looker Studio Dashboard

Your dashboard can now show charts like:

- Orders by Month
- Total Sales by Financial Status
- Fulfillment Breakdown by Product Line

---