Getting Started

In this documentation, you will learn everything you need to know about the ‘Google Custom Event Trigger’. To know the whole process required to integrate this mentioned feature into your website, follow all the steps below accordingly.

What does Google Custom Event Trigger Do?

The ‘Custom Event Trigger’ feature is used to track interactions (specific button & link clicks) that occur on your website. You can integrate this feature into both your Dorik Classic & CMS site with the help of Google (Google Tag Manager & Google Analytics) from your Dorik website builder.

How to integrate Google Custom Event Trigger

Integrating Google Analytics (GA) & Google Tag Manager (GTM)

To learn how to integrate GA and GTM on Dorik refer to the articles below:

Google Analytics Integration

Google Tag Manager Integration

Adding Google Analytics to Google Tag Manager

Follow the steps below to learn how to add GA4 configuration to GTM —

Once you are in your tag manager, press **Add a new tag** under New Tag
Give a title to the new tag
Click on Tag Configuration
Select Google Analytics: GA4 Configuration
Go to Google Analytics and Select the Data Stream that you added to your site
Copy the MEASUREMENT ID
Enter the MEASUREMENT ID of Analytics under the Measurement ID field
Scroll down, tab Triggering & select All Pages .
Press Save from the upper right corner
Press **Submit** from your Tag Manager Dashboard
Give a version name under the Version name field
Press `Publish`
Your new tag will be created & the Google Analytics will be added to that Tag
Before submission, you can preview your tag by pressing the **Preview** button
After pressing the Preview button a pop-up will appear
Enter your website URL on that pop-up
Click on **Connect** & you can see the Debug version of your website

The GIFs below show the whole process being demonstrated visually ⬇️



Once you are in your tag manager, press Add a new tag under New Tag
Give a title under Untitled Tag on the top
Tab Tag Configuration
Select Google Analytics: GA4 Configuration



Go to Google Analytics and Select the Stream that you added to your site
Copy the MEASUREMENT ID
Enter the MEASUREMENT ID of Analytics under the Measurement ID field
Scroll down, tab Triggering & select All Pages
Press Save from the upper right corner



Press Submit from your Tag Manager Dashboard
Give a version name under the Version name field
Press Publish
Your new tag will be created & the Google Analytics will be added to that Tag



Before submission, you can preview your tag by pressing the Preview button
After pressing the Preview button a pop-up will appear
Enter your website URL on that pop-up
Click on Connect & you can see the Debug version of your website

Adding Event Trigger (GA4 Event) to Google Tag Manager

Follow all the steps below to learn how to add GA4 Event to GTM —

Go to your Dorik website builder & select the specific event (button) you want to track
Click on **Edit Element** & the Editor will be open
From the Editor, Go to Advanced & select HTML Selectors
Enter an Id name under the HTML ID field
Press **Publish**
Go to the Tag Manager dashboard & click on Variables from the right-side panel
Click on **Configure** from the upper right corner
After clicking Configure a sidebar will open, scroll it down
Go to Clicks & enable all the options by clicking on 🔲
Go to Tags again & create a new tag by pressing **New** from the upper right corner
Give a title under Untitled Tag on the top
Tab Tag Configuration
Select Google Analytics: GA4 Event
Select the configuration tag that you created before from the dropdown under the Configuration Tag filed
Enter the event name under the Event name field
Press Save & a pop-up will appear
Press Save Tag & Save again
Scroll down & Tab Triggering
Click on ➕ (new trigger) from the top of the right corner
Give a title under Untitled Trigger on the top
Tab Trigger Configuration & a sidebar will open
Scroll it down and go to Click
Click on Just Links
Click on **Some Link Clicks**
Select Click ID from the first dropdown box
Enter the HTML ID name of the specific event (button) under the Last box
Press Save from the top right corner
Once you click save it will take you to your Tag page & now press Save again
Finally, press Submit from the upper right corner
Give a version name under the Version name field
Press `Publish`
Your new Event trigger will be created inside your Tag Manager
Before submission, you can preview your tag by pressing the **Preview** button
After pressing the Preview button a pop-up will appear
Enter your website URL on that pop-up
Click on **Connect** & you can see the Debug version of your website

The GIFs below show the whole process being demonstrated visually ⬇️



Go to your Dorik website builder & select the specific event (button) you want to track
Click on Edit Element & the Editor will be open
From the Editor, Go to Advanced & select HTML Selectors
Enter an Id name under the HTML ID field
Press Publish



Go to the Tag Manager dashboard & click on Variables from the right-side panel
Click on Configure from the upper right corner
After clicking Configure a sidebar will open, scroll it down
Go to Clicks & enable all the options by clicking on 🔲



Go to Tags again & create a new tag by pressing New from the upper right corner
Give a title under Untitled Tag on the top
Tab Tag Configuration
Select Google Analytics: GA4 Event
Select the configuration tag that you created before from the dropdown under the Configuration Tag filed
Enter the event name under the Event name field
Press Save & a pop-up will appear
Press Save Tag & Save again



Scroll down & Tab Triggering
Click on ➕ (new trigger) from the top of the right corner
Give a title under Untitled Trigger on the top
Tab Trigger Configuration & a sidebar will open
Scroll it down and go to Click
Click on Just Links
Click on Some Link Clicks
Select Click ID from the first dropdown box
Enter the HTML ID name of the specific event (button) under the Last box
Press Save from the top right corner
Once you click save it will take you to your Tag page & now press Save again



Finally, press Submit from the upper right corner
Give a version name under the Version name field
Press Publish
Your new Event trigger will be created inside your Tag Manager



Before submission, you can preview your tag by pressing the Preview button
After pressing the Preview button a pop-up will appear
Enter your website URL on that pop-up
Click on Connect & you can see the Debug version of your website

Tracking in Google Analytics

Follow the GIF below to learn how you can track custom event trigger in google analytics —



Go to Google Analytics & click on Report from the sidebar
Click on Real Time & you can see the result



Related Articles

Custom Code Element
Add Custom Code
Google Tag Manager Integration
How to Add Google Analytics on your Website?

Updated on: 05/04/2023