Bablic provides statistics about language usage in your website, but sometimes you may want to dive deeper into the analytics and integrate with our existing analytics framework. Below you will find a guide suggesting how to integrate the Bablic language selection to Google Analytics.
This guide simply aims at helping you develop reporting capabilities autonomously. Bablic does not provide support for any use cases of this integration.
We can add a dimension names bablic-language, which we can query on Google Analytics later on.
1 - Modify the existing Google Tag
You will need to modify the existing (gtag.js) snippet on your website to include the Bablic language code as a User Property named bablic_language.
Prerequisites
Access to the website's code or CMS where the GA4 tag is placed (typically in the
<head>section).Have a GA4 Measurement ID (it starts with
G-).Bablic script is loaded on the page
The Bablic snippet has to be defined prior to the gtag script
Action Steps (Code)
Locate the GA4 Tag: Find the standard GA4 code block on the website. It looks like this:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-XXXXXXXXXX'); // Main configuration</script>Replace with the Modified Snippet: Replace the entire standard script with the customized code below. This code attempts to get the language code and sends it as a User Property before the main
configcommand.Modified GA4 Code Snippet
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YOUR_MEASUREMENT_ID"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());// Custom Code to get Bablic Language and set the User Propertyvar bablicLangCode = null;if(window.bablic && bablic.getLocale) {bablicLangCode = bablic.getLocale();}// Set the User Property if the code is availableif (bablicLangCode) {// NOTE: 'bablic_language' is the key name that will appear in GA4gtag('set', 'user_properties', {'bablic_language': bablicLangCode});}// Send the config/pageview eventgtag('config', 'G-YOUR_MEASUREMENT_ID');</script>
Deploy the Code: Implement the modified snippet on all pages where Bablic is active.
2 - GA4 Admin Setup (Analyst/Admin Task)
he data is now being sent, but you must register the new property in GA4 so it can be used in your reports.
Prerequisites
Edit access to the customer's GA4 property.
The User Property name used in the code:
bablic_language.
Action Steps (GA4 Interface)
Navigate to Custom Definitions:
Log in to Google Analytics.
Click Admin (gear icon in the bottom-left).
In the Property column, click Custom definitions.
Select the Custom dimensions tab.
Create the New Custom Dimension:
Click the blue Create custom dimensions button.
Fill in the fields:
Dimension name:
Bablic Language(This is the display name in your reports)Scope:
UserDescription (Optional): Language set by Bablic widget
User property:
bablic_language
Click Save.