MetaLocator and GA4 work well together, as both platforms track analytics events in an event-driven model. Older analytics platforms, like Universal Analytics, focus on Page Views. However, most actions in MetaLocator don't require a page load, such as a Click to Call event, or an Open Marker Window event, and so tracking events v.s. page loads is a natural fit.
GA4 can track these custom events and more with a bit of configuration. In GA4 you must configure the specific events you are interested in tracking. In this article, we will configure the ClickToCall event, which occurs when a user clicks a phone number. Each event setup operation is the same.
Watch the Video to see this process covered from start to finish:
Before you begin
This article assumes you have already:
Installed Google Tag Manager on your Website and in MetaLocator
Enabled Cross-domain tracking
Created and configured a GA4 Configuration Tag. Be sure to Expand "Fields to Set" and add this option:
Field Name: cookie_flags
Value: secure;samesite=none
These topics are covered in the video above.
One way of checking that the setup is ready is that you can see MetaLocator events appearing in the Google Tag Manager preview:
All MetaLocator custom events start with "ml_".
If your Interface is properly pushing events to your GTM and your GA4 property is seeing activity when you browse your Website:
Tracking MetaLocator Events in GA4
MetaLocator pushes specific, pre-defined events to the data layer. You can listen for these data layer pushes and trigger GA4 events.
Now that MetaLocator and GA4 are communicating via GTM we need to track custom events in GA4 when MetaLocator pushes an event to the GTM data layer. This work in done by creating a tag and a trigger for each custom event. To do that, follow these steps:
Login to Google Tag Manager
Create a new Tag, and choose the GA4 Event Tag. Create the tag as shown below:
For the Trigger, choose Custom Event and enter
ml_clicktocallfor the event name. The name must be exactly as shown.
Save the tags and triggers and give them an appropriate name.
Preview the GTM Workspace and enter the link where your MetaLocator interface is installed when asked in the "Connect" GTM Tag Assistant window.
Perform a few searches and click on a phone number or two in the MetaLocator interface loaded in the GTM Preview
Switch to GA4 and click Admin, then DebugView as shown below; notice the ml_clicktocall custom event appearing in the debug output. That is confirmation that this custom event setup is complete.
A few notes:
Data will not appear in the GA4 reports until approximately 24 hours after the event was tracked, but should appear in the DebugView just a few seconds after they occur.
If you are not seeing events appear in the DebugView, close all browser windows and restart your tests. Also be sure to pick your device under "Debug Device".
We found this page to be a very helpful resource on this topic.
Once you have a custom event tracking correctly, repeat the process above and create additional Tags and Triggers for each custom event. The event name will appear in the GTM Preview as you perform actions in the Locator. Event names are documented here.
Tracking Custom Events in GA4
Some actions in MetaLocator may not trigger an event in the data layer. In this case, a custom event can be created that is triggered based on a different event such as the Click Event.
Just as in the above example, we will create a GA4 Event tag and a trigger; however, in this example we will use a custom click trigger to track clicks to this email button:
We can first identify a CSS selector to use for this button by right clicking the button and choosing Inspect...
The email button has a class of "ml_email_form" as shown in the class attribute of the "a" tag. Using this information, we can properly configure the custom event.
The steps to create the tag and trigger are as follows:
Login to Google Tag Manager
Click Tags, then New
Choose a "Google Analytics: GA4 Event: tag
Name the event "ml_lead_button_click", or any other name appropriate for your GA4 setup. The name in this case does not need to have a special name.
Add a "Click - All Elements" trigger
Configure the trigger as shown below:
Save the Trigger and Tag.
Preview the GTM Workspace and enter the link on your Websiet where your MetaLocator interface is installed when asked in the "Connect" GTM Tag Assistant window.
Perform a few searches and click on an email button or two in the MetaLocator interface loaded in the GTM Preview
Switch to GA4 and click Admin, then DebugView as shown below; notice the ml_lead_button_click custom event appearing in the debug output. That is confirmation that this custom event setup is complete.
