5 Ways To Track Events In Google Analytics | BCS

5 Ways To Track Events In Google Analytics

Google Analytics Haran Huang 6 months ago (10-09) 192 Views 0 Comments

Page Hard-Coding: Directly Add Event Tracking Code

Page hard-coding is to add event tracking code directly to the page. This method is suitable for situations where GTM is not used. If you use GTM, this method is not applicable.

Suppose you need to do event tracking for this button:

5 Ways To Track Events In Google Analytics

This method needs to be added to the source code. If you are not developing or do not understand the code, then this method is not suitable for you. Where we find the source code:

5 Ways To Track Events In Google Analytics

Just add the event tracking code directly here. The event tracking code we want to add is as follows:

ga('send', 'event', 'Videos', 'play', 'Fall Campaign', {
  nonInteraction: true
});

Effect after adding:

5 Ways To Track Events In Google Analytics

Add onclick= to the click position, followed by the event tracking code, which means that event tracking will be triggered when clicked.

Page Element Positioning

In this section, we will talk about event tracking, and introduce one of my most commonly used methods to precisely locate by trigger. Suppose we want to track the location of the event is to click Contact Me, the location is as follows:

5 Ways To Track Events In Google Analytics

The principle is to use the trigger to accurately locate, usually using some classes, id, text to locate, the user clicks to the location to trigger.

Configure  Trigger

Create a trigger, select the All Element type:

5 Ways To Track Events In Google Analytics

name it Contact Me, and select Some Click.

5 Ways To Track Events In Google Analytics

Return to the position in the page that needs to be tracked, move the mouse to this position, right-click to open Inspect to open the source code:

5 Ways To Track Events In Google Analyticsand then copy Contact Me, The specific operations are as follows:

5 Ways To Track Events In Google Analytics

Then paste it into the trigger, the final configuration is as follows:

5 Ways To Track Events In Google Analytics

The positioning here can generally use Click Classes, Click ID, Click URL And Click Text and other unique attributes to locate, this is more convenient, for example, you can also use Click URL to locate, it can be Click URL equals https://www.bbccss.com/contact-me

If you don’t have these variables in your triggers, please think of built-in variables to uncheck these variables.

Configure Tag:Event Tracking

Click on Workspace> Tags> New> Choose a tag type to begin set-up …> Google Analytics: Universal Analytics, Named Contact Me

  • Track Type set as Event
  • Category set as Contact Me
  • Action set as Page URL——The purpose of this is to distinguish clicks on different pages.
  • Non-Interaction Hit set as true——Does not include bounce rate calculations.

The details are as follows:

5 Ways To Track Events In Google Analytics

Save!!!

Preview

Click Preview in the upper right corner to test:

5 Ways To Track Events In Google Analytics

Then return to the blog to simulate the operation, click on “Contact Me”:

5 Ways To Track Events In Google Analytics

 

Click on to see Summary in the lower left corner, find the corresponding operation, click on, and see Tags Fired On This Event Whether there is an event you set, if it is, it means it was successfully triggered.

The test is successful, you can publish it first,

Batch Event Tracking: ga-data Method

This section describes how to do batch event tracking, that is, a tag triggers multiple events. If each event tracking has to be located one by one, the workload is relatively large and tedious. Now we introduce a method that can track events in batches.

Suppose there are several locations on the blog that need to be tracked for events. The specific locations are as follows:

5 Ways To Track Events In Google Analytics

There are four places to do event tracking.

Add ga-data Attribute

Move the mouse to the position you want to track, then right-click and select Inspect to see the source code:

5 Ways To Track Events In Google Analytics

 

Let the colleague of development add the ga-data attribute on it, such as ga-data = “1”. Each location that needs to be tracked needs to be added and assigned a value. The effect after adding is as follows:

5 Ways To Track Events In Google Analytics

 

Configure Variables

Need to set three variables

element

Create a User-Defined Variables Auto-Event Variable and name it element,Variable Type set as Variable , The specific configuration is as follows:

5 Ways To Track Events In Google Analytics

Custom JavaScript

Create a Custom JavaScript, then copy the following code into it and name it Get-ga-data:

<span style="font-size: 12pt;">function() {
	var elem = {{element}},
	    attr = "ga-data", // change this to the attribute that you want to get
        result = (elem.getAttribute && elem.getAttribute(attr)) || null;

	if( !result ) {
		var attrs = elem.attributes,
			l = attrs.length;
		for(var i = 0; i < l; i++) {
			if(attrs[i].nodeName === attr)
				result = attrs[i].nodeValue;
                }
	}

	return result;
}</span>

The specific configuration is as follows:

5 Ways To Track Events In Google Analytics

Lookup Table

Create a lookup table and name it Lookup Table-ga-data:

5 Ways To Track Events In Google Analytics

 

Input Variable Select Get-ga-data; Input is the ga-data value set previously , It is the value in ga-data = “1”,  and output can be customized for specific locations:

 

5 Ways To Track Events In Google Analytics

 

Configure  Triggers

Create a Click-All Elements trigger, select Some Clicks, named as Bulk:

5 Ways To Track Events In Google Analytics

The range of the trigger condition is the value range in ga-data, which is why the value is used in ga-data. More convenient positioning.

 

Configure  Tags:Event Tracking

Make the following settings:

5 Ways To Track Events In Google Analytics

Preview

5 Ways To Track Events In Google Analytics

 

On the real time report back to Google Analytics:

5 Ways To Track Events In Google Analytics

The data was also received.

We done!

Binding Class Method

This section introduces another method of tracking events——the method of binding classes. The advantage of this method is that you do event tracking later. You only need to create a tag bound to the class to implement event tracking.

Suppose what I want to track is here, click on the homepage:

5 Ways To Track Events In Google Analytics

Find Class

Move the mouse to the position you want to track, then right-click and select Inspect:

5 Ways To Track Events In Google Analytics

 

Then copy the value of class.

Configure Tag: Custom HTML

Create a custom HTML tag and name it: Event Tracking——Class,Then copy the following code into it.

<span style="font-size: 12pt;"><script>
     $(".g-mono").click(function(){
    dataLayer.push({
   event:"click-ga",
   eventCategory:"Click",
   eventAction:"HomePage",
      eventLabel:"Test"
}); 
})
</script>
</span>

Trigger Select All Pages:

5 Ways To Track Events In Google Analytics

The place surrounded by the red box in the figure above is to fill in the class. Fill in whatever your class is. Others such as Category, Action and Label can be customized later.

Configure Trigger

Create a trigger for a Custom Event:

5 Ways To Track Events In Google Analytics

The event name depends on what you called the event in the previous step. It must be consistent, here is click-ga

Configure Variables: Data Layer Variable

Create a data layer variable, and then make the following settings. The Data Layer Variable Name is the name that is defined in the first step, and must be consistent:

5 Ways To Track Events In Google Analytics

eventCategory, eventAction, eventLabel, all three need to be created:

5 Ways To Track Events In Google Analytics

 

Configure Tag:Event Tracking

Create a Tag and set it as follows:

5 Ways To Track Events In Google Analytics

Save!

Preview

Click Preview in the upper right corner to test.

5 Ways To Track Events In Google Analytics

The event was triggered.

 

DataLayer Method

This method requires development cooperation, and is usually used when none of the previous methods can be tracked. This method can definitely be traced, because it is actively sending data on the page.

Development cooperation

When the user triggers an action, the development sends data through DataLayer, such as:

  dataLayer.push({
  'test': tt,
  'event': 'mi'
});

Event is the name of the event, and test is the data layer variable.

Configure Trigger

Create a trigger, select a custom event, and configure as follows:

5 Ways To Track Events In Google Analytics

Configure Variable

Create a variable, select the data layer variable, and configure as follows:

5 Ways To Track Events In Google Analytics

Configure Tag: Event Tracking

Create a tag and do event tracking. The trigger here is DataLayer-mi, and the Event Action is DataLayer-test. All are the information passed by the data layer, the specific configuration is as follows:

5 Ways To Track Events In Google Analytics

Summary

In fact, there are some other methods, but the above are the more commonly used methods.

If you are not using GTM, then you can only use page hard-coding method.

If you only do a small amount of event tracking, it is recommended that you use the page element positioning method.

If you need to do a lot of event tracking, it is recommended to use ga-data‘s  batch tracking method.

If it is a special page structure and common methods cannot be used, then consider using the DataLayer method.

 


If you don't understand, You can leave a comment below or email me (haran.huang@ichdata.com).
Like (1)
Post my comment
Cancel comment
Expression Texture Bold Strikethrough Center Italic Sign in

Hi, you need to fill in your nickname and email!

  • Nickname (required)
  • Email (required)
  • Website