Google Analytics for Web – or the story of a forge component built in 10 minutes or less.

Reading Time: 3 minutes

Hello ladies and gentlemen, welcome to one more “intelectual rant” on the OutSystems world. Our today’s speciality will be Google Analytics. Yes, that’s right. That “kinda common thing almost every website uses” was not present on the OutSystems forge and I was like:

 

Whaaaaaaaaaaaat?

 

There was – well, it’s still there, so *there is* – a plugin for mobile but not for web? Outrageous!

Well, technically, there is one forge component that might be able to achieve this. But the description just got me wondering: is this, like, trying to kill a fly with a cannon? Maybe. (Note to self: maybe I should take a look at the components, even if they seem “just too complete for what I’m trying to do”). Move on, nothing to see here…

I’ve already implemented the Google Analytics into our own website – My Game Solutions – so converting it into a forge component should be fairly straightforward. Knowing this, I was like:

 

 

According to Google’s documentation on gtag.js addition to websites, all we needed to do was to install a global tracking snippet by adding a snippet of code immediately after the <head> tag. That snippet of code is:

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_TRACKING_ID');
</script>

 

As you can see from the above piece of code, we have one variable value – which is the Google Analytics Tracking Identifier. As such, this needs to be an input parameter of our component:

 

 

And then, in order to add the above snippet to our current page, I just invoke the AddRawTagToHeader action from HTTPRequestHandlerBuffed – another component created by me when I was implementing web notifications with Pushwoosh – two times. The first time to import the script resource and the second to add the JavaScript code to it.

 

 

And that’s pretty much it. You use the 1-click publish feature, import the component where you want to track it and you can automatically see the results:

 

Some of the data is in portuguese, but you get the idea.

 

And this, fellow readers, is the story of how you can build a forge component in 10 minutes or less. You can access the “final version” here.

 

As usual, let me know if you have any questions or concerns. Also, if you have any suggestions – since this is a basic version -, feel free to drop me a note through Contact, Twitter or through comment below.

Oh, before I go… one planned addition will be the ability to track conversions. If you spend some money on adwords campaigns and you’re not able to see the return of it, something’s wrong.

 

Cheers!

 

TL;DR: a new forge component for Google Analytics is available here.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.