Connecting and visualizing all the data in Data Studio
For more details and informations, please refer the Video on YouTube.
Video URL: https://youtu.be/o_jO-d8fs2c
Overview
In this tutorial, we will learning on How to work with Google Data Studio Connector through connecting with Google App Script and adding components in GDS.
- How a Google Data Studio Community Connector works.
2. How to use Google Apps Script to build a Community Connector.
3. How to use Community Connectors in Data Studio.
For that we should be Familiarize with basic JavaScript and Web APIs.
Community Connector Workflow
In a basic Community Connector, you’ll define four functions:
· getAuthType() function that tells data studio the authorization type for the connector.
· getConfig() function that tells data studio how the user configuration screen should be rendered.
· getSchema() function provides the schema for your data.
· getData() function provides the actual data for the requested fields to the data studio.
Depending on the current step of the workflow, the Data Studio executes these connector functions and uses the response in the subsequent steps.
Once the user has selected the connector. Data studio now executes the connector script and calls the getAuthType() function. Based on the response provided by the connector, data studio will then trigger the required authorization flow. The user will see the AuthFlow on the screen and complete it to provide authorization to the connector. For now only the google authorization is needed for the connector.
For your implementation, you might need additional authorization from a Third party site. After the authorization is complete, data studio will call the getConfig() function from the script. In this function, you can define what configuration information you would like to collect from the user. Based on the response from the script, data studio will render the configuration’s interface for the connector. It asks the user which type of data it should return. The user completed all the necessary configuration and clicks connect.
At this point data studio has the necessary configuration and calls the getSchema() function to get the schema of the data. It will render the field screen and let the user update the schema if needed. The user clicks the create report button to move onto the next step. Now the user will be shown a blank data studio dashboard where they can add charts and tables to create their own report. When the user adds a new chart, Data studio will make the getData() function call to the connector script. Then data studio will render the chart with the data. This is basically how a community connector works.
Set Up Apps Script project
In the next step, you will start creating your connector in Google Apps Script.
Step 1: Visit Google Apps Script.
Step 2: Create a new apps script project by clicking “+ New script” in the top left section.
Step 3: Delete the myFunction function.
Step 4: Give the project a name by Clicking on Untitled project in the top-left of the page and entering an appropriate name.
Now you will start writing your connector code in the Code.gs file.
Data Studio will call the getAuthType() function when it needs to know the authentication method used by the connector. This function should return the authentication method required by the connector to authorize the 3rd-party service.
var cc = DataStudioApp.createCommunityConnector(); function getAuthType() {
var AuthTypes = cc.AuthType;
return cc
.newAuthTypeResponse()
.setAuthType(AuthTypes.NONE)
.build();
}
Users of your connector will need to configure the connector before they can start using it. With the getConfig() function response, you can define what configuration options users will see. Data Studio calls the getConfig() function to get the connector's configuration details. Based on the response provided by getConfig(), Data Studio will render the connector configuration screen and change certain connector behavior.
function getConfig(request) {
var config = cc.getConfig();
config.newInfo()
.setId('instructions')
.setText('Enter npm package names to fetch their download count.');
config.newTextInput()
.setId('package')
.setName('Enter a single package name')
.setHelpText('e.g. googleapis or lighthouse')
.setPlaceholder('googleapis');
config.setDateRangeRequired(true);
return config.build();
}Data Studio calls the getSchema() function to get the schema associated with the selected configuration for the connector. Based on the response provided by getSchema(), Data Studio will show the fields screen to the user listing all the fields in the connector.
function getFields(request) {
var cc = DataStudioApp.createCommunityConnector();
var fields = cc.getFields();
var types = cc.FieldType;
var aggregations = cc.AggregationType;
fields.newDimension()
.setId('packageName')
.setType(types.TEXT);
fields.newMetric()
.setId('downloads')
.setType(types.NUMBER)
.setAggregation(aggregations.SUM);
fields.newDimension()
.setId('day')
.setType(types.YEAR_MONTH_DAY);
return fields;
}
function getSchema(request) {
var fields = getFields(request).build();
return { schema: fields };
}function responseToRows(requestedFields, response, packageName) {
// Transform parsed data and filter for requested fields
return response.map(function(dailyDownload) {
var row = [];
requestedFields.asArray().forEach(function (field) {
switch (field.getId()) {
case 'day':
return row.push(dailyDownload.day.replace(/-/g, ''));
case 'downloads':
return row.push(dailyDownload.downloads);
case 'packageName':
return row.push(packageName);
default:
return row.push('');
}
});
return { values: row };
});
}
function getData(request) {
var requestedFieldIds = request.fields.map(function(field) {
return field.name;
});
var requestedFields = getFields().forIds(requestedFieldIds);
// Fetch and parse data from API
var url = [
'https://api.npmjs.org/downloads/range/',
request.dateRange.startDate,
':',
request.dateRange.endDate,
'/',
request.configParams.package
];
var response = UrlFetchApp.fetch(url.join(''));
var parsedResponse = JSON.parse(response).downloads;
var rows = responseToRows(requestedFields, parsedResponse, request.configParams.package);
return {
schema: requestedFields.build(),
rows: rows
};
}
Update manifest
In the Apps Script editor, select View > Show manifest file.
This will create a new appsscript.json manifest file.
Replace your appsscript.json file:
{
"dataStudio": {
"name": "npm Downloads - From Codelab",
"logoUrl": "https://raw.githubusercontent.com/npm/logos/master/npm%20logo/npm-logo-red.png",
"company": "Codelab user",
"companyUrl": "https://developers.google.com/datastudio/",
"addonUrl": "https://github.com/google/datastudio/tree/master/community-connectors/npm-downloads",
"supportUrl": "https://github.com/google/datastudio/issues",
"description": "Get npm package download counts.",
"sources": ["npm"]
}
}Save the Apps Script project.
Test your connector in Data Studio
Use the deployment
Step 1: In the Apps Script development environment, Click on Publish > Deploy from manifest to open the Deployments screen.
Step 2: Click on the deployment name or the Data Studio icon next to the Get ID link. It will reveal the direct connector link into Data Studio for this connector.
Step 3: Click on the newly available connector link. It will open up a new window in Data Studio.
Authorize the connector
Now, you will see a prompt to authorize the new connector.
Click Authorize and provide the required authorization to the connector.
Configure the connector
Once the authorization is complete, it will show the configuration screen. Type in “googleapis” in the text input area and click Connect in the top right.
Confirm the schema
You will see the fields screen. Click Create Report in top right.
Create your dashboard
You will be in the Data Studio dashboard environment. Click Add to Report.
Finally to add a Time Series Chart. In the menu, click on Insert > Time Series. Then drag a rectangle in the canvas. You should see a time series chart of the npm download count for the selected package.
