Integrating Google Analytics with webMethods API Portal

webMethods API Portal tutorial

Google Analytics

Google Analytics’ main purpose is generating reports and statistics on the usage of  your website, for example:

  • how many developers visited your API Portal .
  • what country are they from.
  • how many pages they visited per session.
  • how many visitors bounced off your Portal (without performing any action).
  • which pages were the most popular, etc.

API Portal Built-In Analytics

webMethods API Portal also offers built-in page analytics which gives the basic overview about

  • how many different pages are viewed
  • Top 10 APIs are viewed frequently
  • Page views trend over time
  • API Views trend over time.

As part of this tutorial we will try exploring a simple way to integrate google analytics with webMethods API Portal so that as a admin you will be able to analyze the user interaction with the API Portal and keep improving the retention rate.

Sign up with Google Analytics

First step would be to signup with google (https://analytics.google.com/analytics/web/) to create  tracking id for our platform. The Analytics tracking code is a snippet of JavaScript that collects and sends data to Analytics from a website.

Once you sign up with GoogleAnalytics, Google will provide you a codesnippet snippet similar to the one listed below.

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Create new modification set

We need to inject scripts provided by Google while loading webMethods API Portal. For doing that, let us create a new modification set within webMethods API Portal.

Further changes below has to be done in Javascript section of the self service customization view.

Injecting the javascript

Starting 10.4 version of API Portal,  customization capability within webMethods API Portal provides ability to inject a javascript library while loading the webMethods API Portal page. Please include the javascript url given by Google Analytics to the Global environment variable "PORTAL_CONFIG_SETTINGS.JSCRIPT_URLS" 

PORTAL_CONFIG_SETTINGS.JSCRIPT_URLS = ["https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"]

 Copy paste the javascript code shared by Google Analytics into Javascript content area with in Self service customization.

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '
GA_MEASUREMENT_ID', {
  'page_path': location.pathname + location.search + location.hash
  });

If you save and activate the modification set, your webMethods API Portal will start pushing the analytics data into Google Analytics.

image.png

image.png

image.png

GA_Dashboard.png