Google Analytics

LiveWhale integrates with Google Analytics or Google Tag Manager to allow you to easily track activity on your site and view browsing data from within LiveWhale. You can also add your own custom tracking.

Tracking with Google Analytics 4

If you are setting up a new LiveWhale site, you can track your site visitors by using Google Analytics 4. (If you are already tracking visitors with Google Analytics or Google Tag Manager in LiveWhale, skip ahead to the migration instructions.)

Note: This integration requires LiveWhale 2.5.0 or higher. If you haven’t yet upgraded and want to start tracking traffic to Google Analytics 4, you must either follow the instructions for adding GA4 to an existing Google Tag Manager integration, or manually add the GA4 tracking HTML code to a site-wide include in your theme.

To set up a new Google Analytics 4 integration:

  1. Create a GA4 property for your site, if you don’t already have one.

  2. Add a data stream (Admin > Property > Data Streams > Add stream) of type “Web.”

  3. Open the stream details and find “Measurement ID” — it’s formatted as G- followed by a series of letters and numbers (G-##########). Copy this and paste it into your /livewhale/core/config.php file.

    Google Analytics 4 Tracker

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $GLOBALS['LIVEWHALE_CONFIG']['HOSTS']=[
    	'%HOSTNAME%'=>[
    		'HTTP_HOST'=>'',
    		'DATABASE_HOST'=>'',
    		'DATABASE_USER'=>'',
    		'FTP_MODE'=>'',
    		...,
    		'GA_SITE_IDS' => [
    			'main'=>[
    				'tracker'=>'G-##########'
    			]
    		],
    		...
    	]
    ];

  4. In order to track calendar and event views (which load via AJAX), make sure you enable “Enhanced measurement” for page views in your GA4 settings. Specifically the setting to track “Page changes based on browser history events” will make sure that all of your calendar and event views are correctly tracked.

    Google Analytics 4 Settings
    Google Analytics 4 Detailed Settings

Tracking with Google Tag Manager

  1. Create a Google Tag Manager account and property.
  2. Enter your site URL and choose “Web” as your target platform.
  3. Find your container ID (GTM-#######) in the installation instructions, or along the top toolbar of the Google Tag Manager admin interface.

Copy this and paste it into your /livewhale/core/config.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
$GLOBALS['LIVEWHALE_CONFIG']['HOSTS']=[
	'%HOSTNAME%'=>[
		'HTTP_HOST'=>'',
		'DATABASE_HOST'=>'',
		'DATABASE_USER'=>'',
		'FTP_MODE'=>'',
		...,
		'GTM' => [
			'id'=>'GTM-#######'
		],
		...
	]
];

Migrating to Google Analytics 4

…from Google Tag Manager

If you are already using Google Tag Manager (GTM-####### in your LiveWhale config and page source), you may not need to alter any LiveWhale settings at all. Instead, you can have your current GTM integration start collecting GA4 data as well.

  1. Create your new GA4 property.

  2. Add the GA4 Configuration and Event tags to your existing Tag Manager property.

…from Google Universal Analytics

If you are using Google Universal Analytics (UA-#######-# in your LiveWhale config and page source), you’ll want to either replace it with Google Tag Manager or add GA4 tracking code so you can start collecting GA4 data.

Note: LiveWhale will continue to support embedding Universal Analytics code until the Google end-of-life on July 1, 2023 using this syntax in /livewhale/core/config.php:

1
2
3
4
5
'GA_SITE_IDS' => [
	'main'=>[
		'tracker'=>'UA-#######-#'
	]
],

If you are currently using Universal Analytics, we recommend migrating to Google Tag Manager or adding GA4 tracking using the above steps as soon as possible so you can start populating data into your GA4 property. You can track data to both at once by adding both trackers to your config.php file and giving them different names (for instance, “main” and “legacy”):

1
2
3
4
5
6
7
8
'GA_SITE_IDS' => [
	'main'=>[
		'tracker'=>'G-##########' // Google Analytics 4
	],
	'legacy'=>[
		'tracker'=>'UA-#######-#' // Universal Analytics (deprecated as of July 1, 2023)
	]
],

Excluding Directories or Pages from Google Analytics

You may selectively exclude certain pages or directories from Google Analytics by specifying them in a config array. To do this:

  • Open the public client config, /livewhale/client/public.config.php, using an FTP client or via the command line
  • Define a $_LW->CONFIG['GA_EXCLUDE'] array (or [$_LW->CONFIG['GTM_EXCLUDE'] for Google Tag Manager), containing the paths to the files you wish to exclude. This will remove the Google Analytics tracker from the specified pages.`

$_LW->CONFIG['GA_EXCLUDE'] = ['/admissions-test/','/faculty/committees/'];
or $_LW->CONFIG['GTM_EXCLUDE'] = ['/admissions-test/','/faculty/committees/'];

Viewing Google Analytics Data in LiveWhale

LiveWhale can collect visitor analytics on your pages, news stories, events, etc. and not only share that with your site editors (visible on the details tab or when editing page details) but you can also then use it in widgets to create ranked lists, such as most viewed stories.

To set this up, you’ll need access to your primary Google Analytics account/profile (the one that should already be listed in LiveWhale for insertion of the tracking code) and the ability to SFTP to your LiveWhale server to edit the main LiveWhale config.php.

Step 1: Create a Google Developers Project

  1. Log into the Google Developers console (https://console.developers.google.com/).
  2. If you don’t have a project yet, click: Create project
  3. Name the project LiveWhale Analytics. (You can use another name of your preference.)
  4. Give the project the ID such as livewhale-analytics. (Again, or anything that works for you.)
  5. Wait for project to be created.
  6. Once you have a project, click: Enable APIs and Services
  7. Find and enable the “Analytics API”
  8. Go back to the console and click: Credentials
  9. Click: Create Credentials > OAuth client ID, and choose type Other. Name your Client ID “LiveWhale Analytics Client ID” or whatever you like.
  10. Then, click: Create Credentials > Service account key, and choose P12 as the key type. Call it “LiveWhale Analytics Service Account” or whatever you like. Creating this will trigger a download of a file ending in “.p12”; save it to your desktop for later.
  11. While here, also get the Email address listed under Service Account.
    Google Analytics Service Account
  12. After it’s created, scroll down in your Credentials screen to find the Client ID.
    Google Analytics Client ID

Your GA Client ID will look like “17435168185-456wef65sd3518w9ef4sdf651we8fssdf98w4.apps.googleusercontent.com”. The GA Email will also be generated in the above steps, and you’ll see it looks like “livewhale-analytics-service-account@livewhale-analytics.iam.gserviceaccount.com”.

Step 2: Give the Project Access to your Data

Now switch to Google Analytics and add the service account as a new user able to access your profile data.

  1. Log into Google Analytics (www.google.com/analytics).
  2. Click Admin
  3. Select the account you specified for your website.
  4. Click User Management
  5. Add new user with the email address you obtained above with permission to Read & Analyze.

You’ll also need to know your Google Analytics Profile ID for the final step. To find it, select the site you want to monitor from within Google Analytics. In the url you will have something similar to this:

https://www.google.com/analytics/web/#report/visitors-overview/a5559982w55599512p12345678

The digits that follow the “p” at the end is your Profile ID.

Step 3: ​Add the configuration to LiveWhale

SFTP to your LiveWhale server to complete the configuration.

  1. Login to your server and locate your back-end LiveWhale folder.
  2. Upload the .p12 file you collected above to /livewhale/integrations/google-analytics. (Before LiveWhale 1.7, instead you’d upload .p12 file to your livewhale/data directory, and if necessary, change the permissions on it to match everything else in the data directory).
  3. Open your main livewhale/core/config.php file and add/change the following values in your matching site HOST:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$GLOBALS['LIVEWHALE_CONFIG']['HOSTS']=[
	'%HOSTNAME%'=>[
		'HTTP_HOST'=>'',
		'DATABASE_HOST'=>'',
		'DATABASE_USER'=>'',
		'FTP_MODE'=>'',
		...,
		'GA_EMAIL'=>'value', // set this to the email address obtained above
		'GA_CLIENT_ID'=>'value', // set this to the client ID obtained above
		'GA_KEY_FILE'=>'filename.p12', // set this to the name of the file you uploaded to /livewhale/integrations/google-analytics
		'GA_PROFILE_ID'=>'value', // set this to the profile ID for your web site, you can obtain this from the url when viewing a profile in Google Analytics
		...
	]
];

Note: If you are updating from an earlier LiveWhale analytics configuration and have GA_PASSWORD set, you may safely remove that definition/line.

Note: Statistical results may take up to 24 hours to display.

Custom Analytics Tracking

Adding custom tracking in Livewhale is generally easy—simply add whatever JS you need to your theme so it loads on every page and you’re all set.

Keep in mind, though: visitors can navigate to different views/events in LiveWhale Calendar without refreshing the page. This can cause confusion for some trackers. Therefore, in LiveWhale 1.7.1+ you can add custom tracking code to make sure you capture every calendar and event view.

If you’re using Google Analytics, no extra work is required. LiveWhale will detect the Google Analytics JavaScript object (window.ga or window._gaq) and push individual calendar/event views to it.

If you’re not using or want to bypass Google Analytics, add the following to your theme’s custom calendar script and LiveWhale will detect the livewhale.custom_tracking function and use that instead of any default Google Analytics handling.

1
2
3
4
5
6
7
(function($, LW) {

  livewhale.custom_tracking = function(pageview) {
    console.log('Replace this line with custom tracking for the page ' + pageview);
  }

}(livewhale.jQuery, livewhale));
Edit

Still have questions?

Try searching on the left menu, or email support@livewhale.com and we'll be happy to help.