As you all know portal 7.3 has an ajax framework page which means that not the whole page is reloaded but only the contentarea div. So where do you have to place your google analytic code so that every time a user visits a page/iview the data is send to google?
That’s an easy question: you have to place it somewhere in the contentarea. So the easiest way is to create an iView with your google analytic code in it and to add that iview in every page. But what if you already have a lot of iViews or pages and you do not want to go to every page and add that iView? And in some cases you only have an iView so you have to add you existed iView in a new page and also add your google analytic iview to it => overkill.
Another solution is to download the contentarea war file from your server and change the code and then overwrite SAP code. But that solution I prefer not to use in this case.
So what I did was create an iView and add it to the Ajax framework page/ custom ajax framework page and thats it!
I listen to the event “navigate” and every time that happens the data is send to google. Which means this also works for Web Page Composer(WPC) pages.
First you need to create a portal application. After you deployed it to the server you create an iView of it and then add it to the framework page you use.
You can find the source code here. After unzippen it you have to import into youre NWDS(Import > General > File system).(Don't forget to change the google analytics id in the iview properties as explained below)
See below for the steps in detail:
Prerequisites:
- Create a Google Analytics account(https://www.google.com/analytics/web/provision?et=&authuser=#provision/SignUp/)
- Portal Server should be able to access(telnet) to www.google-analytics.com(check this with your basis team)
1) create a portal application
Click Next > Finish.
After the application project is created you have to create an portal application object.
Right click on the portal application project you just created. Follow the next steps:
After clicking Finish the portal object will be created and the googleanalytics.java file will be open in your NWDS.
The only code will put in the doContent method of the AbstractPortalComponent is:
package flexso.com;
import com.sapportals.portal.prt.component.*;
import com.sapportals.portal.prt.resource.IResource;
public class googleanalytics extends AbstractPortalComponent
{
public void doContent(IPortalComponentRequest request, IPortalComponentResponse response)
{
response.include(request, request.getResource(IResource.JSP,
"jsp/analytics.jsp"));
}
}(Don't forget to add the import statement "import com.sapportals.portal.prt.resource.IResource;")
The above code will load the jsp file that we still need to create.(see next step)
Next step is to create the JSP file where the google analytic code will be placed.
So first drilldown to the folder jsp under dist > PORTAL-INF > jsp and right click.
Attention: the name that you use here has to be the same as the one you used in the doContent method in the java file.
Click Finish to proceed.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import = "com.sapportals.portal.prt.component.IPortalComponentRequest" %>
<%@ page import = "com.sapportals.portal.prt.component.IPortalComponentResponse" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>analytics</title>
<!-- begin part 1 -->
<%
String googleID = componentRequest.getComponentContext().getProfile().getProperty("googleanalytics.id");
%>
<!-- end part 1 -->
<script>
// begin part 4
function callbackGetNodeInfo(currentNode){
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '<%=googleID%>', 'flexso.com');
ga('set', 'title', currentNode.getTitle());
ga('set', 'location', currentNode.getNodeURI());
var loggindUser = LSAPI.AFPPlugin.configuration.getUser().FirstName +
", " +
LSAPI.AFPPlugin.configuration.getUser().LastName +
" ("+
LSAPI.AFPPlugin.configuration.getUser().LogonUid +
")";
ga('set', 'dimension1', loggindUser);
ga('send', 'pageview',{
'dimension1': loggindUser
});
}
// end part 4
// begin part 3
function navigationEventHandler(eventObj) {
//eventObj.dataObject.target.split("?")[0] this will split the target at "?" and [0] will return the first part of target value which is the navurl
if(typeof eventObj.dataObject.target === "string"){
LSAPI.AFPPlugin.model.getNode(eventObj.dataObject.target.split("?")[0],callbackGetNodeInfo);
}else
LSAPI.AFPPlugin.model.getFirstNode(callbackGetNodeInfo);
// end part 3
// begin part 2
EPCM.subscribeEvent("urn:com.sapportals:navigation", "Navigate", navigationEventHandler);//when you are navigate in the portal
EPCM.subscribeEvent("urn:com.sapportals.portal:browser","load", navigationEventHandler);//when you load the page
// end part 2
</script>
</head>
<body>
</body>
</html>The JSP is divided in 4 parts:
Part 1: Is some java code to get the value of our google analytics id.(Which is provided by Google) This property will be maintenable through the iview property of the application. Which makes it easy when you transport the iview to acceptance or production you then only need to change the value of the property.
Part 2: Is the subscribeEvent method. With that piece of code you will run your EventHandler method every time the navigation event is triggered.
Part 3: Is the actual method that will be executed. In that method I use the getNode method of the LSAPI object. For more information about the LSAPI navigation method see the url: http://help.sap.com/saphelp_nw73/helpdata/en/c8/5eacdc37434cfb8ec5e5288b884100/frameset.htm
Part 4: Is the code that you get from google analytics. You only need to change the actual id with <%=googleID%> so it gets the value stored in the iview property. In this part I also added some additional information like user name , firstname and loginid which can be viewed in a custom report.(For more information check google analytics documentation) Attention: do not forget to change 'flexso.com'. You can find the value that you have to put there in your google analytic piece of code that is generated by google.
The last part of the portal object is to add the property googleanalytics in the portalapp.xml.
Replace the part <component-profile/> with:
<component-profile>
<property name="googleanalytics.id" value="UA-XXXXX-Y">
<property name="category" value="Google Analytics"/>
</property>
</component-profile>Now the application is done and you need to deploy it to the server.
Once it deployed on the server the last step is to create an iview of it and add it to the ajax framework page you use.
Steps to follow:
Go to Content Administration > Portal Content Management > Portal Application.
Create an iview from the application by copying it to a folder in the Portal Content.
After you created the iview you must change the property "googleanalyticsid" in the property of the iview.
Click on the button "Modify Properties" and change the value with the id from google.
Do not forget to change the property "authentication scheme" to anonymous if you also want to track anonymous user on your portal.
Now you still need to add this iview to your framework page. If you use the SAP standard ajax framework page it is best to copy that page and change that one.
If you have a custom framework page just add this iview to it. If you don't have a container for "technical/hidden iviews" make sur the iview has no tray or something visible. (Maybe you can set the height to 1px).
In this example I will add the iview to standard framework.
You can find the standard SAP Ajax Framework page under: Portal Content > Portal Users > Standard Portal Users > Ajax Framework Content.
Open the page and select youre google analytic iview and right click on it and select Add iview to page > Delta link.
The last step is to change the container where the iview will be placed.
Now save your changes and go to your google account do some tests.
PS: this is my first blog.
Enjoy!
- SAP Managed Tags:
31 Comments
