Google Web Tools « Intelligrape Groovy & Grails Blogs

Archive for the ‘ Google Web Tools ’ Category

Integrating Google plus in grails application

Posted by Vishal Sahu on December 6th, 2011

In my current project, i needed to integrate Google+ in the application using server-side API. Google uses OAuth2.0 protocol for authorization when our application tries to access the data. All we require is an access token to fetch data from Google using REST calls which serves data in JSON format.

I implemented it using Web Server Applications API and thought it worth sharing.


There are basically 3 steps to fetch data from Google.


1. Register an application.

We need to register an application at Google API Console. Go to the Google console page using the link provided and create an aplication.


Steps involve in registering an application are:-


a.) Create project by providing name to the project.



b.) Turn ON the service required, in our case it is Google Plus API.



c.) Create a Oauth 2.0 Client ID.



d.) Create the OAuth 2.0 ClientId and provide the callback URL where google will send the authorization token.



e.) Note down Client ID and Client Secret as generated in the above step.



2. Obtain an Access Token from the Google Authorization Server.


Obtaining an access token involves 2 steps.


a.) Request for Authorization Code.


In this step, we will request the Google server for authorization code by providing registered application client ID in the URL to Google server.

I created an action to redirect to Goolge, when someone want to connect to google plus.

String CLIENT_ID =client_id_obtained from registered app
String CALLBACK_URL = callback_url_as_mentioned in the registered app.
String GOOGLE_PLUS_SCOPE='https://www.googleapis.com/auth/plus.me'    // scope is the permissions we are requesting.

Action code is as:

def registerOnGooglePlus = {
String authorizeUrl = "https://accounts.google.com/o/oauth2/auth?scope=${GOOGLE_PLUS_SCOPE}&
redirect_uri=${CALLBACK_URL}&response_type=code&client_id=${CLIENT_ID}&access_type=offline"
URL urlForGooglePlus = new URL(authorizeUrl)
redirect(url: urlForGooglePlus)
}

The Redirect will take user to permissions page, if the user is already logged-in or will take to login page and then permissions page.

After approving the required permissions, user will redirect back to the application’s registered Callback URL with the authorization code.



b.) Request for Access Token with the authorization code obtained from the above action.


Access Token can be received by a POST request using the Client Secret and authorization code received.

The POST call requires 5 properties to be send in the body of the request in the encoded form.


	code : The authorization code returned from the initial request
	client_id : The client_id obtained during application registration
	client_secret : The client secret obtained during application registration
	redirect_uri : The URI registered with the application
	grant_type : authorization_code

// Sample action to receive authorization code

def callBack={
StringBuilder sb = new StringBuilder("code=");
sb.append(URLEncoder.encode(code, "UTF-8"));
sb.append("&client_id=");
sb.append(URLEncoder.encode(clientId, "UTF-8"));
sb.append("&client_secret=");
sb.append(URLEncoder.encode(clientSecret, "UTF-8"));
sb.append("&redirect_uri=");
sb.append(URLEncoder.encode(callbackUrl, "UTF-8"));
sb.append("&grant_type=");
sb.append(URLEncoder.encode('authorization_code', "UTF-8"));

String URL_TO_REQUEST_TOKEN= 'https://accounts.google.com/o/oauth2/token'

URL url = new URL(URL_TO_REQUEST_TOKEN);
HttpURLConnection connection = (HttpURLConnection) url.openConnection();
try {
connection.setRequestMethod("POST");
connection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
connection.setRequestProperty("Content-Length", "" + sb.toString().length());
connection.setRequestProperty("Host", "accounts.google.com");
OutputStreamWriter outputStreamWriter = new OutputStreamWriter(connection.getOutputStream());
outputStreamWriter.write(sb.toString());
outputStreamWriter.flush();
log.debug("Response code ${connection.responseCode} , Message : ${connection.responseMessage}")
String resultData = connection.content.text
def responseJson = JSON.parse(resultData)
String ACCESS_TOKEN = responseJson?.access_token
}
catch (Exception e) {
e.printStackTrace()
}
}

3. Calling Google API.

Now, with the help of access token, we can call google API to fetch Data by appending the access token in the GET request.

Example:


To fetch person’s profile data

GET :  https://www.googleapis.com/oauth2/v1/userinfo?access_token=ACCESS_TOKEN

To get list of profile acitivties

 GET :  https://www.googleapis.com/plus/v1/people//activities/public?access_token=ACCESS_TOKEN

References:-
http://code.google.com/apis/accounts/docs/OAuth2WebServer.html

http://code.google.com/apis/accounts/docs/OAuth2.html


Hope this helps..!!!


Vishal Sahu
vishal[at]intelligrape[dot]com
www.intelligrape.com

  • Share/Bookmark

How to get Google Indexed Pages Count, and/or do Google searches through AJAX/programmatically

Posted by Kushal Likhi on September 27th, 2011

Hi,
Recently i had to get the count of the Pages Google has Indexed for a perticular web Site progmatically.
In the process i found that Google offers an AJAX Search API to perform Google Searches.
.
Hence i Implemented a Class which does the same for me easily(Ajax Search in Google).
And this Solution Does Google Searches programmatically and Also Give us the Indexed Pages Count.
Note: Its Groovy Implementation, Similar can be done in JavaScript using Ajax though intent will remain the same.
The class has been named GoogleAjaxSearch because it uses the Google AJAX Search API ;)

Use Cases Are As Follows:

//Case 1 Simple Search
String searchQuery = "my search Query"
GoogleAjaxSearch googleAjaxSearch = new GoogleAjaxSearch(searchQuery)
println googleAjaxSearch.results //Type List<Expando>, Just print it to see available properties

//Case 2: Get Number Of Indexed Pages in Google
String searchQuery = "site:intelligrape.com"
GoogleAjaxSearch googleAjaxSearch = new GoogleAjaxSearch(searchQuery)
println googleAjaxSearch.estimatedResultCount

//Case 3: Redo a search with same SearchQuery or a different Search Query
String searchQuery = "search string"
GoogleAjaxSearch googleAjaxSearch = new GoogleAjaxSearch(searchQuery)
googleAjaxSearch.redo() //Re-Search with same query
googleAjaxSearch.redo("New Query") // Re-Search With New Query

//Case 4: All Details Available
String searchQuery = "site:intelligrape.com"
GoogleAjaxSearch googleAjaxSearch = new GoogleAjaxSearch(searchQuery)
println googleAjaxSearch.estimatedResultCount //Gives the result count, indexed pages count
println googleAjaxSearch.currentPageIndex    //Search result server side pagination - current page
println googleAjaxSearch.results  //List<Expando> containing results
println googleAjaxSearch.responseStatus //HTTP Status Code
println googleAjaxSearch.responseDetails //Details for response, if any
println googleAjaxSearch.searchQuery     //Search Query
println googleAjaxSearch.moreResultsUrl // Url to hit for next Page of results
println googleAjaxSearch.jsonResult // Complete raw JSON Result from google
println googleAjaxSearch.pages  // Pagination Pages Details

The Class Code Is As Follows:


package myPackage.googleSearch

import grails.converters.JSON

class GoogleAjaxSearch {

    public String searchQuery
    public String responseDetails
    public String moreResultsUrl
    public String jsonResult

    public Integer responseStatus
    public Integer currentPageIndex
    public Integer estimatedResultCount

    public def pages

    public List<Expando> results = []

    private static final String ajaxSearchTarget = "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=###SEARCHQUERY###&filter=0"

    public GoogleAjaxSearch(String searchQuery) {
        this.searchQuery = searchQuery
        search()
    }

    public GoogleAjaxSearch() {
        this(null)
    }

    public void redo() {
        search()
    }

    public void redo(String newSearchQuery) {
        this.searchQuery = newSearchQuery
        search()
    }

    private void search() {
        if (searchQuery) {
            URL url = new URL(ajaxSearchTarget.replace('###SEARCHQUERY###', searchQuery))
            URLConnection connection = url.openConnection()
            connection.setDoInput(true)
            InputStream inStream = connection.getInputStream()
            BufferedReader searchResultContent = new BufferedReader(new InputStreamReader(inStream))
            jsonResult = searchResultContent.getText()
            parseJsonAndPopulateObject()
        }
    }

    private void parseJsonAndPopulateObject() {
        def jsonArray = JSON.parse(jsonResult)
        this.responseStatus = Integer.parseInt(jsonArray.responseStatus as String, 10)
        this.responseDetails = jsonArray.responseDetails
        this.moreResultsUrl = jsonArray.responseData.cursor.moreResultsUrl
        this.currentPageIndex = Integer.parseInt(jsonArray.responseData.cursor.currentPageIndex as String, 10)
        this.pages = jsonArray.responseData.cursor.pages
        this.estimatedResultCount = Integer.parseInt(jsonArray.responseData.cursor.estimatedResultCount as String, 10)
        results = jsonArray.responseData.results.collect {
            new Expando(
                    content: it.content,
                    GsearchResultClass: it.GsearchResultClass,
                    titleNoFormatting: it.titleNoFormatting,
                    title: it.title,
                    cacheUrl: it.cacheUrl,
                    unescapedUrl: it.unescapedUrl,
                    url: it.url,
                    visibleUrl: it.visibleUrl
            )
        }
    }
}

Hope That Helps :)
Regards
Kushal Likhi

  • Share/Bookmark

Using Google Analytics for tracking Multiple Steps of a Webflow

Posted by Vivek Krishna on February 28th, 2011

In one of our projects, we are using a webflow for an order wizard. We needed to track the number of users converting a draft to a confirmed order using Google Analytics. This would have been simple if the URLs were different for each step. However, that is not the way webflows work and a similar URL is generated for multiple steps. After some searching around, we found that we could call a trackPageView method in Google Analytics API and set a name for the page being tracked. This could be done using

<script type="text/javascript">
    try {
        var pageTracker = _gat._getTracker("<ANALYTICS-KEY>");
        pageTracker._trackPageview("/enterDetails.html");
    } catch(err) {
    }
</script>

Replacing “/enterDetails.html” in each page with the corresponding step name did the trick. However, this is an old version of the Google Analytics API. Our application uses a newer version of the JavaScript code provided by Google.

In this, we had to use Virtual Page Tracking, which is a method explained in the Google Analytics API Docs under the section, Virtual Page Views. We had to write something like


<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'ANALYTICS-KEY']);
_gaq.push(['_trackPageview', '/enterDetails.html']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

For usage on grails, we used a template, which takes in the pageName and uses /${controllerName}/${actionName}/${pageName} to  generate the virtual page name which is tracked. Now we are successfully tracking the conversions.

Hope this helps.

Vivek

http://in.linkedin.com/in/svivekkrishna

  • Share/Bookmark

What is Google Web Optimization, How to use or apply it in your project?

Posted by Tarun Pareek on August 12th, 2010

Recently as part of POC, I need to apply the google web optimizer on various parts of page to determine which content user respond to best and will be most effective in getting conversions. For this you need to keep track of the various conversions, but how? Thats where google web optimizer come handy, providing reports based on experiments specified by you on various parts of page and also suggesting action to optimize your site for better business results.

Steps to apply google web optimization in your project :

1. Create an account in google web optimizer and sign in.

2. Then take some time to determine which aspect or parts of page you want to test and how.(for more valuable and better results).

3. Create an experiment in google web optimizer :

  • 3.1 Choose algo for experiment: Multivariate test or A/B test.
    • 3.1.1 Multivariate test allow you to apply variations on various part of same page.
    • 3.1.2 A/B test allow you to apply conversion between two pages. (Not on various part of page).
    • **In my case i choose multivariate test.
  • 3.2 Fill in details : Give your experiment unique name, specify the tracking page public URL on which various parts optimization is to be done and also specify the conversion page public URL on which user will be directed after successful conversion.(Very useful in term of form submission).

4. Tag Pages -> Now the optimizer provide you several tags, How to apply scripts/tags on your page for that particular experiment :

  • 4.1 Control Script : Randomly control the variations on parts of page. (Must Applied in header tag of page)
    	<!-- Google Website Optimizer Control Script -->
    	<script>
    	function utmx_section(){}function utmx(){}
    	(some script......................................................
    	length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
    	d.write('<sc'+'ript src="'+
    	'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'...........
    	................................. some more script text here
    	</script>
    	<!-- End of Google Website Optimizer Control Script -->
  • 4.2 Tracking Script : Track the user behaviour. (Applied at bottom of the page within body tag).
    	<!-- Google Website Optimizer Tracking Script -->
    	<script type="text/javascript">
    	Some script text here...................................
    	........................................................
    	<script type="text/javascript">
    	try {
    	var gwoTracker=_gat._getTracker("....some id for tracker..........");
    	gwoTracker._trackPageview("...tracker page.....");
    	}catch(err){}</script>
    	<!-- End of Google Website Optimizer Tracking Script -->
  • 4.3 How to apply Variation Script : Applied just before the part of code to be tested(headline, image, promotext, button) i.e. on which variation is to be applied and at the end of that code part “noscript” tag need to be applied to specify the region for variation and unique tag names for particular variation section.
    	<script>utmx_section("payment")</script>
    		Test Drive our product in <b>$10</b>
    	</noscript>
  • 4.4 Conversion Script : To be applied in body tag at bottom of converision page you specified.
    	<!-- Google Website Optimizer Conversion Script -->
    	    <script type="text/javascript">
    	    some script.....................................................
    	    '.google-analytics.com/ga.js"></sc'+'ript>')</script>
    	    <script type="text/javascript">
    	    try {
    	    var gwoTracker=_gat._getTracker("....some id for tracker..........");
    	    some script code here.....................................
    	    }catch(err){}</script>
    	<!-- End of Google Website Optimizer Conversion Script -->

5. Validate Pages -> First apply all the tags on your page as specified above and then validate the page with optimizer validate page link, that all the script are applied correctly.

  • 5.1 If you use validate pages button then it will use the public URL you specified for tracking and conversion page.
  • 5.2 To validate the pages offline, Optimizer provide option to manually provide pages that are to be validated.

Note : All the test need to be passed to apply optimization on your page.

6. Create a Variations -> After applying tags, create variations for the various part of page. Variation can include any type of string(it can be a html code, text, script etc).

Example : Within payment tag :

Original Variation : Test Drive our product in $10 (specified in your page)
Variation 1 named “Classic” :

		Test Drive our product in <b>$50</b>

Variation 2 named “Executive” :

		Test Drive our product in <b>$100</b> with additional privileges

7. Review and Launch the Experiment, in Google web optimizer.

Example :

	<html> 
	<head>   
	    <!-- Google Website Optimizer Control Script -->
		<script>
		function utmx_section(){}function utmx(){}
		some script.....................................................
		length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
		d.write('<sc'+'ript src="'+
		some code here ...............................................
		+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
		'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
		</script>
		<!-- End of Google Website Optimizer Control Script -->
	</head>
	<body>
             ............body code start here............................................................................
             ....................................................................................................................
	    <script>utmx_section("offer")</script>
			Secure your child future in <b>$10</b>
	    </noscript>
           ....................................................................................................................
           ....................................................................................................................
 
 
	    <!-- Google Website Optimizer Tracking Script -->
		<script type="text/javascript">
		some script.....................................................
		'.google-analytics.com/ga.js"></sc'+'ript>')</script>
		<script type="text/javascript">
		try {
		some code...................................................
		}catch(err){}</script>
		<!-- End of Google Website Optimizer Tracking Script -->
 
	</body>
	</html>

Hope this will help to improve your site business ;)

Regards,
Tarun Pareek
Intelligrape Software

  • Share/Bookmark
Comments Off