GA4 Email and Phone click tracking using GTM
In case you prefer video format, you can watch it below. You can also subscribe to my YouTube channel!
Any contact link clicks could be considered valuable actions for your business, so in this article, we will take a look at one approach of how you can track those automatically using GTM and GA4.
The method will work only if you are using proper contact links using mailto: and tel: which either start a call automatically or open your email client.
Example contact links on your website:
<a href="tel:13211111111">(321) 111-1111</a><a href="mailto:info@google.com">info@google.com</a>Create CSS selector to target contact links
As we are targeting contact links, that would contain either tel: or mailto: in the link URL, so we will use that as a condition in our trigger.
In GTM create a new trigger under the “Triggers” section.
From the trigger type select “All Elements”.
Select “Some Clicks” option.
Now, from the first dropdown select “Click Element”. If you don’t have it as an option, click “Choose Built-In Variable” and select “Click Element”.
Then you can select a match type, which in this case should be “matches CSS selector”.
Here you should provide the following CSS selector:
[href*="mailto:"], [href*="tel:"]
Let’s save this trigger now, and take a closer look at this CSS selector to understand what it does.
What does this CSS selector mean?
If you haven’t worked before with CSS selectors it might be quite confusing at first, so I will try to explain what we do here as easily as possible. You can also read more about what are CSS selectors on MDN website.
So CSS selectors in GTM are just a set of rules that we use to target specific elements on the page. In this scenario we have 2 distinct rules divided by a comma to target links with email and phone numbers:
[href*=”mailto:”] – will target links that contain “mailto:”
[href*=”tel:”] – will target links that have “tel:” in their href parameter
For example, if you inspect any phone or email links on your website, you will see similar links:
And in general, the CSS rules provided above are enough to track clicks on simple links as above.
Configure GA4 event tag
When we have a trigger, let’s create a GA4 event tag that will actually pass data to Google Analytics once a visitor clicks on any of those links.
Create a new tag and pick “Google Analytics: GA4 Event”
From Configuration dropdown select your GA4 config tag (if it’s implemented via GTM) or provide the measurement ID that is used on the website.
Next, provide the event name that you want to see in reports when any of the contact links are clicked.
I will use “contact_link_click”.
Add a custom parameter to store clicked link values
Update January 2023: You can collect clicked phone numbers or email addresses by using a default parameter name – “link_text”. This way you won’t need to create a custom dimension in GA4 and it still will be available in any custom Exploration report.
If you would also like to pass the phone numbers and emails that were clicked on the website you might do that by adding a custom event parameter (custom dimension). You might want to do that at least to easily distinguish between email and phone number clicks.
Expand the “Event Parameters” section and add a new row.
You can provide a custom dimension name that you will use to store clicked link content.
I will use “clicked_text” here, but you can use a custom one if you already have that in GA4.
And my variable value will be “Click URL” to see exact emails and phone numbers that were clicked.
To add that, just click on the icon near value field.
Then search for “Click URL”.
If you can’t find “Click URL” like me, then click on “Built-ins” in the top right corner and select it from there (It will enable this default variable and add it to your event parameter value.
Now you should see a similar view as I have here:
Alternatively, you can also use Clickd Text if you have a phone or email in the text of the link.
Add a trigger for contact link clicks
The last thing we need to in GTM is to attach a trigger that we have created previously.
Click on “Triggering” and select newly created trigger.
Now you can save your tag, but don’t publish the container yet!
Create custom dimension in GA4
In order to save clicked contact link values in GA4 we need to have “clicked_text” dimension to be defined in GA4 interface, so let’s create it.
Open Google Analytics and navigate to the “Configure” section from the left menu.
Go to “Custom definitions” and create new cutom dimension.
Provide a descriptive name, make sure scope of the dimension is “Event” and use the same Event parameter name as used in GTM. In my case parameter name was “clicked_text”.
Save the variable and we should be ready to test our implementation!
NB! If you forget to add a custom dimension then additional information about clicked link values will not be collected.
Testing contact link tracking
In Google Tag Manager enable preview mode and then let’s click on a few contact links.
Click on any phone or email link and then open the Tag Assistant tab.
If you select “Click” event and open GA4 event tag you should see the event name that we have provided “contact_link_click” along with the clicked value, which in my case was – “mailto:vlad@ezsegment.com”
You can also double-check if event went through in GA4 Realtime. If everything went well, you should see your event here as well:
That’s it! All you have to do now is to publish your container LIVE.
Wrap up
As you can see it is relatively easy to track any email click or phone number clicks in Google Analytics using Tag Manager. All historical events will be reported in default Engagement > Events section, and if necessary you can also mark those as a conversion, in Configure > Conversions section.
Hope you found it useful and managed to add tracking for your contact links!
