Available plans: Mini plan and above (previous plans: Starter plan and above)
Note: Watch out for duplicate tracking with Apps integration
If you've already set up Google Analytics through Studio.Design's Apps integration, adding a GA tag through Google Tag Manager as well will cause duplicate tracking. Make sure to deliver the GA tag through only one of these methods.
Google Tag Manager terminology
Term | Description |
Tag | Code from external services like Google Analytics or Google Ads. Normally, you'd embed this code directly into your site, but with Google Tag Manager, you can manage everything in one place. |
Trigger | Defines user actions like clicks or page views. When the specified event occurs, the corresponding tag fires. |
Before you start
Before setting things up, connect Google Tag Manager through Apps integration.
Setup steps
Note: The Google Tag Manager screens shown in this article may differ from what you see, due to updates on Google's end.
Step 1. Create a GA4 configuration tag
* This guide is based on the official Tag Manager Help.
In Google Tag Manager, click [Tags] > [New].
Give the tag any name you like. In the [Tag Configuration] box, select [Google tag] and enter your GA4 measurement ID (the "G-" format ID) under [Tag ID].
You can find the measurement ID in your GA4 admin console.
Go to [Admin], then under [Data collection and modification], click [Data streams] and copy the measurement ID shown in the top right of the details screen.
(You can also refer to the steps in Apps integration: Connect Google Analytics.)
Click [Triggering] and select the [Initialization - All Pages] trigger.
* For more details about triggers, see the official article on page triggers.
Click [Save] to save the tag.
Click [Preview] to open Tag Assistant, then enter your site's URL.
When the tag fires successfully, it appears under "Tags Fired".
Step 2. Create a GA4 event tag
* This guide is based on the official Tag Manager Help.
In Google Tag Manager, click [Tags] > [New].
Give the tag any name you like, then configure the following:
[Tag Type]: Select [Google Analytics: GA4 Event]
[Measurement ID]: Enter the measurement ID you got in Step 1
[Event Name]: Enter any event name you like
Click [Triggering], then click [+] in the top right to create a new trigger.
Give the trigger any name you like, then configure the following:
[Trigger Type]: Select [Click > All Elements]
[This trigger fires on]: Select [Some Clicks], then enter [Click Element] [matches CSS selector] [
#cv-0001, #cv-0001 *] (you can use any string in place ofcv-0001)* If the trigger doesn't fire correctly, try changing [All Elements] to [Just Links] and check again.
Click [Save] to save the trigger and tag.
Click [Preview] to open Tag Assistant, then enter your published site's URL.
When the tag fires successfully, it appears under "Tags Fired".
Step 3. Publish your changes
Click [Submit] in the top right of the screen.
Enter a version name and other details, then publish.
Step 4. Set the ID in Studio.Design
In the Studio.Design Design Editor, set an ID on the element you want to track click events for.
Select the box you want to add an ID to.
Open the [Settings] tab in the right panel. If the panel is closed, open the right panel first.
In the [ID] field, enter the same string you used in the trigger in Step 2.
If you were editing a published site, update the site. Your changes won't show up on the published site until you do.
5. Check that everything works
Use the Realtime report in Google Analytics to verify it's working. Click the element you set the ID on in your published site, then check that the event is recorded in the report.
If it's not working, check the following:
Has the version been published in Google Tag Manager?
Are any browser extensions interfering with the tag firing? (Try turning them off and testing again.)
Did you update the site after setting the ID in Studio.Design?
Google Tag Google Tag Manager