Connect Google Analytics to your APEX application

Published by Chao Yu on

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.

You need two things on this page, the measurement ID and the code block. Code block is used later in apex page.

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.

Basic Tracking information.

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.

To view this event. Go to => LIFT CYCLE => Engagement => Events => find search on the bottom list.
All event has its own default parameters ( see right red marker). Let us find Parameter we send to Google,(you could, if you like to create your own parameters, as long as it follow the json string format) search_term and value.
You could easily make a matrix find the most searched items. and make changes to your report and sort base on it.

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.

Life Time, chart is refreshed every 1 min
Life cycle : On this page, you can find all page_views and the average engagement time! ( there is a delay between real-time page and life-cycle page, it can take up to 24 hours. )

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.

Categories: APEX