Help center

Integrations

How to add Google Tag Manager to your site

Search

How to add Google Tag Manager to your site

This article provides a comprehensive guide on setting up Google Tag Manager and Google Analytics, enabling tracking and analytics of user events on your Framer website.

If you only need to set up Google Analytics, please follow the instructions in this article.

Create Google Tag Manager Account

  1. Go to tagmanager.google.com.

  2. Click on "Create Account" at the top right.

  3. Enter your Account Name, which should be your company or team name. Enter your Container Name, which should be your desired project name. Choose the target platform, which in our case is "Web". Accept the terms, and your account will be created.

  4. You will be redirected to a page where you will see the code snippet that you need to copy and add into your Framer website.

  5. Now, open your Framer project and go to site settings by clicking on Framer at the top left, then select "site settings" and open settings. Click on "General" on the left and add the code snippets into the head and body sections.

    • The first code needs to be added into the <head> tag.

    • The second code needs to be added at the start of the <body> tag. After adding the code snippets, save and publish your page. Refer to the image below.


Check if the code is properly installed

  1. Go to the Google Tag Manager interface and click on "preview" in the top right corner.

  2. Enter the URL of the website and click "Connect". If the connection is successful, you will see a pop-up in the bottom right corner of the page and on the interface.



  • You can install Tag Assistant Companion here to open preview mode in a new tab.

Connect Google Tag Manager with Google Analytics 4

Now that our setup is complete, we can proceed to connect Google Tag Manager with Google Analytics. This will allow us to pass information and track page views.

  1. Go to analytics.google.com

  2. Enter your Account Name, which should be your company or team name, and click Next.

  3. Enter your Property Name and click Next.

  4. Enter your business details and click Next.

  5. On the next screen, choose the "Get Baseline Reports" option.

  6. On the following screen, select "Web" as the platform.

  7. Enter your website URL on the next screen and click "Create stream".

  8. You will then see a page with instructions on how to install the code snippet into your website. Close this page using the X on the top left. Your Measurement ID will be displayed on the page. Click the icon next to it and copy the Measurement ID.

  • If you want to track specific click events, paste your Measurement ID into a notepad as you will need it later.



  1. Now go back to Google Tag Manager and click Tags on the left sidebar, click New - Tag Configuration - Google Analytics and choose Google Tag



  1. Paste the Measurement ID into the Tag ID box.

  2. Then click Triggering and select Initialization - All pages.

  3. Name your tag and click Save.

Check if Google Analytics code is activated

  1. Go to the Google Tag Manager interface and on the top right, click on "preview".

  2. Enter the URL of the website and click on "Connect". When you see Tag Assistant connected, go back to the Tag Assistant tab and click on "Initialization" in the left sidebar. There you will see that it has been successfully fired.

Check if data is received by Google Analytics

Go to Google Analytics and click on Admin at the bottom left. Click on Debug View. There, you'll be able to see the events.

Track all elements clicks on your website with Google Tag Manager

  1. Click Triggers on the left sidebar and click New

  2. Click Trigger Configuration and choose “All Elements” under the Click section

  3. Name your trigger and click Save.

Passing click event information to Google Analytics

To pass click event information to Google Analytics, follow these steps:

  1. Go to Tags.

  2. Click on "New".

  3. Choose "Tag Configuration".

  4. Select "Google Analytics - Google Analytics: GA4 Event".

  5. Paste the measurement ID.

  6. Add an event name (let's say all_elements).

  7. Click on "Triggering" and select "All Elements Clicks".

  8. Name the event and click "Save".

  9. Click on "Preview" and click any link on your page. Then, go to Google Analytics, click on "Admin" at the bottom left, and select "Debug View". There, you will be able to see the events as "all_elements".

Track all link clicks on your website with Google Tag Manager

  1. Go to the left sidebar and click on "Click Triggers", then click on "New".

  2. In the "Trigger Configuration" section, select "Just Clicks" under the Click category.

  3. Provide a name for your trigger and click on "Save".

Test the trigger

  1. Click "Preview" and then click any of the links on the website.

  2. Return to the Tag Assistant and you will see that "Links Clicks" has been added.

Track Specific Clicks on Your Website with Google Tag Manager

To do this, we need to enable click variables so that we can identify a common feature among all related links. Follow these steps to enable click variables:

  1. Go to Variables on the left-hand side.

  2. Click on Configure.

  3. Select all the options under the "Clicks" section.

After that, click on preview and click on any of the links you want to track on the website. Return to tag assistant, and you will see that some "link click" triggers have been added to the left-hand side.

For this case, all links have the same class name, which is "framer-styles-preset-c6u029".

Now we will edit our existing link click trigger. Go to the Google Tag Manager interface, click on "Trigger" on the left, and select "All Links Clicks" that we previously added.

  1. Click on the pencil.

  2. Select "Some Link Clicks".

  3. Add "framer-styles-preset-c6u029" to the box on the right.

  1. Rename it and click Save.

Pass click event information to Google Analytics

  1. Go to Tags

  2. Click New

  3. Click Tag Configuration

  4. Choose Google Analytics - Google Analytics: GA4 Event

  5. Paste the measurement ID

  6. Add the event name

  7. Click Event Parameter - Add parameter

  8. Now add "link_url" to the left box and click the icon on the right of the Value box, select "Click URL"

  9. Add another parameter

  10. Add "link_text" to the left box and select "Click Text"

  1. Click on "Triggering" and select "All Link Clicks".

  2. Name the event and click "Save".

  3. Now, click on "Preview" and navigate through the links on your website. Then, go to Google Analytics and click on "Admin" at the bottom left. Select "Debug View" to see the events labeled as "menu_links".

Publishing Changes

  1. Once you have confirmed that everything is working correctly, click the Submit button located in the top right corner.

  2. Provide a version name.

  3. Click Publish.


Useful resources: