Bulk Event Tracking in GoogleAnalytics gtag.js

Bulk Event Tracking in GoogleAnalytics gtag.js

Category：JavaScript

Pub.date：2019-07-23

To know the number of button clicks, etc. using GoogleAnalytics event tracking.<br>
In this case, I often see how to set onclick for each button.
```
// analytics.js
onClick="ga('send','event','category','click','label',1);"
```

This ga() is an old notation in analytics.js, so the notation is different in the recent (as of 2019) gtag.js.

```
// gtag.js
onClick="gtag('event','click',{'event_category':'category','event_label':'label','value':1});"
```

However, embedding them within HTML tags makes the code very messy.<br>
The JavaScript should be written separately and in a separate file.

## I want to measure all buttons on the site.

If you want to measure all the buttons on your site, you will need to set up an event listener for each button or link, but if you set up id attributes for each individual button or link, it will be too complicated to manage.<br>
It is possible to use querySelector, but it is difficult to maintain when the site structure is changed.

## Efficient setup

I tried to think of a way to control it all at once without adding anything to the HTML, but I couldn't come up with a good idea, so I think the following code is the best for now.

For each button or link we want to measure, we will set up the data-event="xxxx" attribute to get it in bulk and set up an event listener.<br>
It is assumed that var page="top" will be used to determine the page.<br>
The code is as follows.
```
<!doctype="html">
<html>
<head>
</head>
<body>
<button type="button" data-event="PUSHボタン">PUSH</button>
<a href="http://example.com/" target="_blank" data-event="example.comへ">example.comを開く</a>

<script> var page = 'top'; </script>

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

<script>
(function(window,document){
	window.addEventListener('load',function(){init();},false);
	function init() {
		var dataEvents = document.querySelectorAll('*[data-event]');
		for (var i = 0; i < dataEvents.length; i++) {
			(function(dataEvent){
				var eventCategory = page;
				dataEvent.addEventListener('click',function(){
					gtag('event','click', {'event_category':eventCategory, 'event_label':dataEvent.getAttribute('data-event'), 'value':1});
				},false);
			})(dataEvents[i]);
		}
	}
})(window,document);
</script>
</body>
</html>
```

CONTENTS

Plesk

How to install SSH2 extension for PHP8.3 on Plesk

Flutter

Android Studio. Could not determine java version. Unable to find bundled Java version.

JavaScript

Video loading with JavaScript

Unreal Engine

Even if the package succeeds in Unreal Engine 5 (5.0.3), nothing is displayed on .exe launch

Web Server

WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED

Plesk

Unbanning an IP that has been banned by fail2ban via SSH

Flutter

flutter: Erase the DEBUG band on the upper right

Flutter

flutter: uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library

JavaScript

this in JavaScript changes. How to keep it unchanged.

CakePHP4

Package setasign/fpdi-tcpdf is abandoned, you should avoid using it. No replacement was suggested.

CakePHP4

Warning with CakePHP 4.4. Deprecated: Use of `BaseErrorHandler` and subclasses are deprecated.

PHP

MySQL in XAMPP does not start. Error message in red

CakePHP3

Class Cake\Composer\Installer\PluginInstaller is not autoloadable, can not call post-autoload-dump script

3D

SkySphere Rendering Settings in Lightwave 3D

3D

SkyBox rendering settings in Lightwave 3D

CSS

Overlay elements with display: grid in CSS. position: absolute is not used.

JavaScript

Media queries in JavaScript, matchMedia() Branching by browser width

Flutter

Place AdMob banner ads in Flutter in footer or inline

Flutter

Fix the orientation of the Flutter app vertically

Flutter

Multilingualize with Flutter, dynamically switch languages, save languages, hamburger menu

Flutter

Released Android app developed by Flutter on Google Play

Flutter

Sound playback with Flutter Sound effect playback

Flutter

Use SVG images in Flutter

Web Server

Warning: Using a password on the command line interface can be insecure.

Flutter

ITMS-90683: Missing Purpose String in Info.plist

Flutter

ITMS-90078: Missing Push Notification Entitlement

Flutter

Dart SDK is not configured

Other

From 21H2 of Windows 11 and Windows 10, the character code handling of filenames is now UTF-8.

Plesk

Uncompress (decompress) the .tzst extension Zstandard compressed tar file ZSTD

Plesk

Plesk: Bulk download of email data

Android

SOLUTION: Please take action: your app does not comply with Google Plays policies

PHP

Install ssh2 extension on Plesk PHP8.1

PHP

Setup SSH2 on XAMPP PHP8.1 using ssh2_connect()

JavaScript

Fixed HTML modal window background

PHP

php json_decode results in NULL. Include backslash

Other

Cannot PUSH in SourceTree. Logon failed, use ctrl+c to cancel basic credential prompt.

JavaScript

Old Browser Judgment Judgment for Safari13 and Safari14 and above

Plesk

Steps to install ssh2 extension on PHP 8.0 in Plesk

Plesk

Plesk Migration error /usr/local/psa/admin/plib/api-cli/domain_pref.php

JavaScript

Send POST with JavaScript

CakePHP4

Toggle CakePHP4 validation rules

Plesk

Changed Plesk FTP access from active to passive

Web Server

AWS LightSail CentOS8 to AlmaLinux8

Android

resource android:color/system_neutral1_1000 not found.

Other

Setting up AlmaLinux on Windows 11 Hyper-V

Other

Delete the Windows DNS resolver cache

CakePHP4

CakePHP4 Mailer Return-Path setting mb_send_mail 5th argument additional_params

Other

Windows11 Widen the width of scroll bars

CakePHP4

List of compatible PHP versions for CakePHP

Other

Email from OpenBugBounty. Security Vulnerability Notification

Photoshop

Working with WebP format images in Photoshop

Photoshop

Photoshop is heavy. Slow.

Other

Modify a file in Windows but do not want to change the modification date/time timestamp

JavaScript

String conversion library Display dates in Japanese Display numbers in millions

JavaScript

Input form formatting and data checking and validation

JavaScript

JavaScript multifunctional smooth scrolling SVG support

JavaScript

Asynchronous loading of multiple JSON in JavaScript

JavaScript

Determine if it is a modern browser or not User agent not used

Other

Got error 176 Read page with wrong checksum from storage engine Aria

Unreal Engine

UE4 GPU is crashing or D3D device has been removed

JavaScript

In YouTube video embedding, perform arbitrary processing after the video is stopped.

CakePHP4

Composer detected issues in your platform: Your Composer dependencies require a PHP version ...

Web Browser

Do not let Firefox search from the URL field.

Web Server

Debugging mod_rewrite and RewriteRule. Displaying matched values for regular expressions.

CSS

CSS counter Auto-numbering summary

CSS

Summary of variables (custom properties) in CSS

Other

File access is slow when using Drive for Desktop.

Web Browser

Firefox Revive the right-click menu Display image information

Other

PC wont start.　ASUS The system has POSTed in safe mode.

Plesk

Plesk Change TLS protocols type

Other

How to convert boot disk from MBR to GPT non-destructively and completely free of charge in preparation for Windows 11.

Android

Android app works locally, but not when published to the store

Blender

Blender What to do when the Smoke effect does not produce flames.

iOS

Rejected in iOS app registration application Guideline 4.3 - Design

iOS

Rejected in iOS app registration application Guideline 2.1 - Performance - App Completeness

iOS

Rejected in iOS app registration application ITMS-90713: Missing Info.plist value

iOS

Rejected in iOS app registration application Guideline 2.5.10 - Performance - Software Requirements

iOS

Rejected in iOS app registration application Guideline 4.2 - Design - Minimum Functionality

iOS

Rejected in iOS app registration application Invalid Binary.

iOS

Rejected in iOS app registration application ITMS-90035: Invalid Signature

iOS

iOS app upload error Missing or invalid signature

iOS

Cocoapods setup on M1 Mac

iOS

Recorded with Xcode iOS Simulator. Preparation required

iOS

SwiftUI Localization of app name

iOS

Xcode display of compilation time

iOS

SwiftUI Video playback without displaying the video controller

Android

Android application development Fixed rotation of display screen Fixed vertically Fixed horizontally

iOS

SwiftUI Display image. Resize and display

iOS

SwiftUI Save the data to the terminal. Used within the app

iOS

SwiftUI @State、@ObservedObject、@EnvironmentObject

iOS

SwiftUI Multilingualization procedure and usage

iOS

SwiftUI TextField that accepts only numbers. Safely Int conversion

iOS

SwiftUI Stop smoothing the movement without permission

iOS

SwiftUI Overlay the image on the image at any position

iOS

SwiftUI Full display on iPad tablet. Do not get smaller on the left side

iOS

Swift Fix the app vertically

Plesk

Error email from Plesk. ls: cannot open directory /usr/lib64/httpd/modules: Permission denied

Android

Android application development, using View Binding

Android

Android application development, data transfer to another activity

Android

Android application development, theme color change. Dynamic switch to dark theme

Android

Android app development, hide keyboard with background tap

Android

Android app development, hide title bar

Android

Android application development, switch display language within the application

Android

Android application development, margins can be created at the top and bottom of ImageView

Plesk

Plesk channel: no 'mirrors.sought.rules.yerp.org' record found, channel failed

Plesk

Diagnose and repair Plesk WARNING in database

Plesk

Diagnose and repair Plesk WARNING on web server and FTP server

Plesk

If you register the same domain as the full host name in Plesk and delete it, you will not be able to send mail to the root

Web Server

Emails sent to hotmail.com, live.com, msn.com, outlook.com are returned with an error.

Android

Android application development. SVG image is not displayed. string too large - instead as ＆apos;STRING_TOO_LARGE＆apos;.

Web Browser

SVG format favicon

JavaScript

Checking HTML radio buttons does not mark checked

PHP

Add date and time to filename in phpMyAdmin database export

Web Server

Cross-origin resource sharing (CORS) that handles multiple domains in the Access-Control-Allow-Origin header

CakePHP4

cakephp4 failed to open stream: No such file or directory in /path/to/vendor/composer/autoload_real.php on line 71

Plesk

Stack of processes where Plesk repair does not finish

Plesk

Corruption repair of Plesk. Table MailOutgoingMessagesStats

Plesk

Plesk. Checking for nginx ULIMIT value 1 domains have been found on server.

Plesk

Plesk repair db does not fix the error

Plesk

Backup and Restore Plesk psa Database

Plesk

I can't send a Plesk mail form email. mb_send_mail 554:5.7.0

CakePHP4

CakePHP4 Save View output to a file.

CakePHP4

Bing Maps. Creating CakePHP4 components

CakePHP4

Behaviors to save the change history of a table to another table in CakePHP4

CakePHP4

Disabling CSRF in CakePHP4 for specific controllers and actions

PHP

error handling Can't connect to local MySQL server through socket /tmp/mysql.sock

Plesk

Plesk key update delay notification. License auto-renewal fails.

Plesk

Unable to use mail and mb_send_mail in Plesk. It returns an error.

Plesk

Lets Encrypt certificates used to strengthen Plesk server security are not automatically renewed

3D

Create 3D photos for Facebook using computer graphics, Lightwave.

CakePHP4

Error in CakePHP4 Missing CSRF token body in /path/to/Middleware/CsrfProtectionMiddleware.php on line 254

Plesk

Error with PHP Composer in Plesk Could not update the integration plugin

CakePHP4

Error running CakePHP4 with XAMPP 7.4.4 (PHP 7.4.4). The datasource configuration debug_kit was not found

Illustrator

Insert and print name and barcode in Illustrator

Plesk

SPF spam protection in Plesk

Plesk

Unable to upload large files in Plesk. client intended to send too large body

Plesk

Plesk license key is not updated. 502 Bad Gateway. Update manually.

CakePHP4

Using components in Command (formerly Shell) in CakePHP4.

CakePHP4

Fine-grained control of CSRF Middleware coverage in CakePHP4. Don't let CSRF check only specific controllers.

Plesk

Adding DNS CAA records in Plesk

Plesk

Hide the Plesk Apache Welcome page, to which the WAF redirects.

Plesk

Plesk . PHP Fatal error: Call to undefined function mb_convert_encoding()

Plesk

AWS Plesk . Can not bind a socket to address subdom.mydom.tld:715 - Cannot assign requested address

Plesk

Plesk admin panel opens when accessing the domain hosted by Plesk using https.

Plesk

Using Plesk Migrator with AmazonAWS Lightsail.

Plesk

Lets Encrypt renewal fails in Plesk. Unable to issue certificate. Could not secure domains

Plesk

Logs of upgrading from Plesk Onyx to Obsidian

Plesk

Plesk PHP Fatal error: Call to undefined function mysqli_connect()

Plesk

SSH2 Extension setup for Plesk php7.3

Plesk

Apply LetsEncrypt only to www subdomains in Plesk

Plesk

Plesk task remains at 0% and does not progress. Unstacking a task

CakePHP3

Dynamic optimization (compacting) of CakePHP3 view output, eliminating indentation and other waste in .ctp output.

Plesk

ImunifyAV fails to scan Failed to scan in Plesk

Web Server

Check your mail server settings SPF DKIM

Plesk

Plesk Obsidian Setting the full host name is not reflected.

Other

Update Thunderbird to Ver.68 64bit.(Windows10)

Plesk

Execute php with Plesk php exec, using Imagick

NextCloud

Nextcloud setup with Plesk extension Aiming to reduce weight

JavaScript

Bulk Event Tracking in GoogleAnalytics gtag.js

Web Server

Disallow access from MJ12bot

CakePHP3

20110#0: * connect() failed (111: Connection refused) while connecting to upstream

Android

Errors in Android Application Development net::ERR_CLEARTEXT_NOT_PERMITTED

Web Browser

Summary of forced reloads (super reloads) in each browser

3D

Procedure for creating a 3D PDF from Lightwave3D

PHP

ImageMagick installation in XAMPP for Windows php7.2.9

JavaScript

Create Adobe Brackets minimum configuration extension with javaScript

JavaScript

Create a Visual Studio Code minimum configuration extension in JavaScript

CakePHP3

Validation does not work in CakePHP3 (CakePHP3.6). It passes without being evaluated.

Plesk

Plesk's CRON runs in UTC instead of JST. service crond restart does not fix the problem.

Plesk

Difference between non-existent files and non-existent directories when setting up error pages in Plesk PHP-FPM

Web Server

/bin/bash^M: bad interpreter: No such file or directory

CakePHP3

The format of date retrieved by CakePHP3 is 2-digit year. Change the default to 4 digits per year.

Plesk

SSH2 Extension setup for Plesk php7.2

PHP

XAMPP PHP7.2 SSH2。 Call to undefined function ssh2_connect()

SVG

Embedding SVG into CSS with dataURL

Web Server

Automatic multi-generational archiving of the entire specified directory of a web server to local CRON.

Web Server

Automatic backup of multiple generations of MySQL database on web server (dump output)

NextCloud

Eliminate or change the file that is automatically placed when a user is created in NextCloud. Or change it.

Web Server

Don't show index.php in NGINX. Want to omit index.php. Prevent redirection loops.

Plesk

NextCloud(OwnCloud) setup with Plesk and infinite storage with amazonS3 connection

Docker

Create a Docker for Windows VM image on a location other than the C drive

Docker

Docker OCI runtime create failed. Is it the volumes in docker-compose.yml ?

Web Browser

Change the timeout value of Firefox

CSS

Normal display in IE11 on Windows 10, but layout is broken in IE11 on Windows 7.

CakePHP3

XAMPP is slow, development on localhost is slow. Poor response time. increase the priority of IPv4.

Plesk

Delete read emails from before Plesk n days

Plesk

Plesk postfix mail send failure to resend behavior. Handling of resend mail queue.

Plesk

Plesk Onyx PHP Warning: fsockopen(): php_network_getaddresses: getaddrinfo failed: Name or service not known

Plesk

Upgrading from Plesk Onyx 17.5.3 to 17.8.11

Plesk

Plesk detected an inconsistency in the system's Package Manager database. Resolved this issue manually

Plesk

Extension of Plesk Mail Log Retention Period

CSS

CSS flexbox display:flex summary

SVG

Gaps appear in inline SVGs, IE gets smaller, and they don＆apos;t display properly.

PHP

Converting a string into an array of single characters in php

Plesk

Bulk registration of restricted IP addresses for administrator access to Plesk

Plesk

Bulk Email Address Registration in Plesk

Plesk

In Plesk, save only the email configuration without including the email content

Plesk

Plesk /etc/httpd/logs/error_log Can't locate CGI/Carp.pm

Plesk

Error with perl (CGI) in Plesk. End of script output before headers

Plesk

Changing the provider associated with a customer in Plesk

JavaScript

ECMAScript 2015 Syntax Memorandum

PHP

HTML syntax checking with PHP. I want to get an error for no end tag or wrong tag nesting.

CakePHP3

In CakePHP3, the time zone of DATE type field is UTC

JavaScript

First time with ECMAScript 2015 and Babel

SVG

Hatching pattern memorandum in SVG

Plesk

I can't see the site in Chrome on my old Mac. ERR SPDY INADEQUATE TRANSPORT SECURITY

WebAssembly

I've set up a WebAssembly environment. What do I need to write to make it work?

WebAssembly

I set up the WebAssembly environment. What do I need to write to make it work?

Plesk

Blank screen for certain users in Plesk RoundCube. Blank page display. date.timezone setting.

Plesk

error connect() failed (111: Connection refused) while connecting to upstream

Web Server

Refused to send email 550 5.7.606 Access denied. mail.protection.outlook.com

Web Server

Massive 404 access Microsoft Office Protocol Discovery

CakePHP2

Error after moving CakePHP2 to a new server. open_basedir restriction in effect

Plesk

Plesk ModSecurity Failed to update ruleset.　modsecurity_ctl failed

CakePHP3

CakePHP3で、PHP Parse error: syntax error, unexpected T_USE, expecting

Plesk

Checking load average in Plesk

CakePHP3

The position of label in CakePHP3 HTML radio button is different from CakePHP2. input tag cannot be controlled.

Plesk

Composer in Plesk Use Composer in Presque

CakePHP3

Get the address (path) of an img that is not a CakePHP3 img tag. Specify the extension

CakePHP3

CakePHP3 date display is not year/month/day (YYYY-MM-DD)

Plesk

Outdated intl.so on a web server in Plesk environment? ICU is outdated?

CakePHP3

Checking if a field's value is unique in CakePHP3 validation

CakePHP3

CakePHP3 Database Update Log with Behaviors

CakePHP3

Error with intl ICU in CakePHP3. CORE/src/Utility/Text.php

CakePHP3

CakePHP3 Controller/AppController subclasses in between

CakePHP3

CakePHP3 Model/Entity subclasses in between

CakePHP3

Knowing your table name in CakePHP3 Model/Entity. and the code to set the maximum value of the field

CakePHP3

Creating a theme with CakePHP3

If you notice anything on this page, please let us know. If you need a reply, you will need an email address.