Get Started with Community Connectors

In this example, you will develop a Community Connector to use the Google Fonts Developer API to fetch metadata about all Google Fonts. You can then use this Google Fonts Metadata connector in Data Studio to fetch and display the data in a dashboard.

Prerequisites

To build the Google Fonts Metadata Community Connector, you'll need An API key for Google Fonts Developer API. You will use this key in the next section.

To develop a Community Connector, you will need developer access to features in Apps Script.
Request developer access

Create an Apps Script project

Visit Google Apps Script and create a new project. You should see a shell project with a blank myFunction function in the Code.gs file. Delete the myFunction function and insert the following code in the Code.gs file. Make sure to replace YOUR_API_KEY with the Google Fonts Developer API key that you acquired in the above section.

var API_KEY = "YOUR_API_KEY";

function getConfig(request) {
  var config = {
    configParams: [
      {
        type: "INFO",
        name: "connect",
        text: "This connector does not require any configuration. Click CONNECT at the top right to get started."
      }
    ]
  };
  return config;
};

var fontDataSchema = [
  {
    name: 'family',
    label: 'Font Family',
    dataType: 'STRING',
    semantics: {
      conceptType: 'DIMENSION'
    }
  },
  {
    name: 'category',
    label: 'Font Category',
    dataType: 'STRING',
    semantics: {
      conceptType: 'DIMENSION'
    }
  },
  {
    name: 'count',
    label: 'Count',
    dataType: 'NUMBER',
    semantics: {
      conceptType: 'METRIC',
      isReaggregatable: true
    }
  }
];

function getSchema(request) {
  return {schema: fontDataSchema};
};

function getData(request) {
  var dataSchema = [];
  request.fields.forEach(function(field) {
    for (var i = 0; i < fontDataSchema.length; i++) {
      if (fontDataSchema[i].name === field.name) {
        dataSchema.push(fontDataSchema[i]);
        break;
      }
    }
  });

  var url = [
    'https://www.googleapis.com/webfonts/v1/webfonts?sort=alpha&fields=items(category%2Cfamily)&key=',
    API_KEY];
  var response = JSON.parse(UrlFetchApp.fetch(url.join(''))).items;

  var data = [];
  response.forEach(function(font) {
    var values = [];
    dataSchema.forEach(function(field) {
      switch(field.name) {
        case 'family':
          values.push(font.family);
          break;
        case 'category':
          values.push(font.category);
          break;
        case 'count':
          values.push(1);
          break;
        default:
          values.push('');
      }
    });
    data.push({
      values: values
    });
  });

  return {
    schema: dataSchema,
    rows: data
  };
};

function getAuthType() {
  var response = {
    "type": "NONE"
  };
  return response;
}

Create the manifest file

In the Apps Script development environment, select View > Show manifest file. This will create a new appsscript.json manifest file. Remove all content from this manifest file and replace it with the following:

{
  "dataStudio": {
    "name": "Google Fonts Metadata",
    "company": "Awesome Developer",
    "logoUrl": "https://www.gstatic.com/images/branding/product/1x/google_fonts_48dp.png",
    "addonUrl": "https://developers.google.com/datastudio/connector/getstarted",
    "supportUrl": "https://developers.google.com/datastudio/connector/faq",
    "description": "This connector uses the Google Fonts Developer API to retrieve metadata for all font families served by Google."
  }
}

Save both the script file and the manifest file. You have created your first Data Studio Community Connector!

Use the Community Connector

  1. In the Apps Script development environment, Click on Publish > Manage Deployments to open the Deployments screen. The default deployment, Latest Version (Head), will be listed.
  2. Click on the version name (Latest Version (Head)) or the Data Studio icon next to the Get ID link. It will show the connector link into Data Studio for this connector.
  3. Click on the newly available connector link. It will open up a new window in Data Studio with your connector already selected and awaiting authorization.
  4. Click Authorize and provide the required authorization to the connector.
  5. Once the authorization is complete, it will show the configuration screen mentioning "This connector does not require any configuration.". Then click on Connect in the top right corner.
  6. Add a Table or Bar chart to the dashboard to see the connector in action. For both chart types, try changing the dimension from Font Family to Font Category. If everything was set up properly, you should see five(5) Font Categories with display being the highest with around a count around 280.

Next steps

Now that you have tried out your first connector, view more advanced guides on Community Connectors: