JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Query Explorer 2 Formatter/Exporter</h1><input type="text" id="GAQuery" size="75" placeholder="Query Explorer 2: Query URI" value="https://www.googleapis.com/analytics/v3/data/ga?ids=ga%3A82426939&dimensions=ga%3Asource&metrics=ga%3Apageviews%2Cga%3AsessionDuration%2Cga%3Aexits&filters=ga%3Amedium%3D%3Dreferral&sort=-ga%3Apageviews&start-date=2014-07-07&end-date=2014-07-21&max-results=50"/><input type="submit" onclick="queryStringToJSON()"/><br/>
<textarea id="output" cols="75" rows="14"></textarea>

CSS

body {
  font-family: Helvetica, serif;
  margin: 0 0 0 20px;
  font-size: 14px;
  color: #333;
}
pre {
  font-family: Inconsolata;
}
h1 {
  font-family: 'Cantarell', Helvetica, serif;
  font-size:1.6em;
  background-color: #666;
  color: #fff;
  margin-top: 0;
  margin-left: -20px;
  padding: 5px 0 5px 20px;
  border-bottom: 3px solid black;
}

JavaScript

function queryStringToJSON() {   
    var url = $('#GAQuery').val();
    var pairs = url.slice(url.indexOf('?') + 1).split('&');
    
    var result = {'optionalArgs': {}};
    pairs.forEach(function(pair) {
        pair = pair.split('=');
        if ( pair[0] == 'ids' || pair[0] == 'metrics' || pair[0] == 'start-date' || pair[0] == 'end-date') {
            result[pair[0]] = decodeURIComponent(pair[1] || '');
        } else {
            result.optionalArgs[pair[0]] = decodeURIComponent(pair[1] || '');
        }
    });
    console.log(result);
   $('#output').text("var query = " + JSON.stringify(result, null, 1) + ";\n var results = Analytics.Data.Ga.get(query.ids, query['start-date'], query['end-date'], query.metrics, query.optionalArgs);");
}