Connect Google Analytics to your APEX application

prerequisite:

1. Any APEX application you have access to
2. Google Account

Go to google analytics ( make sure you have google analytics enabled ) and then go to the following section of the admin page and click on Create Account

Once Account is created switch to the newly created account by selecting in the drop-down-list.(marked in red) Then you aught to create a new property. Once a new property is created, go to Data Streams.

After you copy the code block, you would go to APEX application builder, find the page you would like to include Google Analytics and paste the code snippet here:

That is it! With these steps, you will be able to see some universal statics about your site for this page. If you want to track more pages, you would need to include this block of code on each page.

In the second half of this post, We will go through 2 ways of creating Custom Events in Google Analytics. Say, i want to record all the clicks on these four different buttons. And tell them apart from each other.

First way: Go to Google analytics and find events section and click on create event.

After the custom event is created, we can then to go APEX and hooks it to a click event.

gtag('event', 'click', 
     { 'event_category' : 'engagement',
      'event_label' : 'click_button_tank_btn', 
     'content_id':'tank' 
 });
gtag('event', 'click', {
  'event_category' : 'engagement',
  'event_label' : 'click_button_orderbtn',
  'content_id':'order'
}); 
gtag('event', 'click', {
  'event_category' : 'engagement',
  'event_label' : 'click_button_jettiesbtn',
  'content_id':'jetties'
}); 
gtag('event', 'click', {
  'event_category' : 'engagement',
  'event_label' : 'click_button_settingsbtn',
  'content_id':'settings'
});     

Notice that I used ‘content_id‘ to identify the click event. This parameter is used on Google Analytics to create custom events. Here: =>

The 2nd way to create a custom events is rather simple, you can directly create an event with the following syntax. This method is more tempting, during practice I did not notice any difference between both methods.

gtag('event', 'sample_event', {
    'parameter1':'value1',
    'parameter2':'value2'
});

From here on, we will explore some additional events we can use.

First Example: track search box

let searchVal = apex.item( "P1_NEW" ).getValue();
gtag("event", "search", {
  "search_term": searchVal,
  "value": searchVal
});ssd

This example will send user search string to google. Let us now go to google and find this search event and to see what is collected.

Another Example :

Say you are making a single page application, where you use a lot of Ajax to swap content or hide and show. And you want to see how often a ‘Page’ is viewed and how long user stayed on it.

let terminalName = apex.item( "P1_NEW_1" ).getValue();
gtag('event', 'page_view', {
  page_title: terminalName,
  page_location: '',
  page_path: '',
  send_to: 'YOU OWN PROPERTY ID'
})

I use this drop-down list to simulate page swap.

So let us recap,

with this set-up, we are able to view default charts and tables. More importantly we are able to monitor custom events and collect custom data. In the next blog, we will dig one step further. We will make use of custom dimensions and create our own table and charts in google analytics.