← Tools & Integrations

Typedream x Google Analytics 4 with Google Tag Manager

A guide on how to set up Google Analytics for your website or app by creating a Google Analytics 4 property, adding a data stream, and adding your Google Analytics code.

Analytics

How does this integration work?

background

First, create a website on Typedream

background

Second, connect Google Analytics to your site

background

Then, monitor site performance and power your SEO strategy

Adding Google Analytics to Typedream.

Discover how to set up Google Analytics for your website or app by creating a Google Analytics 4 property, adding a data stream, and adding your Google Analytics code.

Step 1: Create an Analytics account

Your first step is to set up an Analytics account, unless you already have one. Skip to creating a property unless you want to create a separate account for this website and/or app. For example, you might want to create another account if this website and/or app belong(s) to a separate business.

Go to https://analytics.google.com
In Admin, click Create, then select Account.
Provide an account name. Configure the data-sharing settings to control which data you share with Google.
Click Next to add the first property to the account.

Step 2: Create a new Google Analytics 4 property

Are you continuing from "Create an Analytics account", above? If so, skip to step 2. Otherwise, in Admin, click Create, then select Property

Enter a name for the property (e.g. "My Business, Inc website") and select the reporting time zone and currency. If a visitor comes to your website on a Tuesday in their time zone, but it's Monday in your time zone, the visit is recorded as having occurred on Monday.

Click Next. Select your industry category and business size.
Click Next. Select how you intend to use Google Analytics.
Click Create and (if you are setting up a new account) accept the Analytics Terms of Service and the Data Processing Amendment.
Continue to Add a data stream to start collecting data.

Step 3: Add a data stream

Are you continuing from "Create a property", above? If so, skip to step 2. Otherwise,
  • In Admin, under Data collection and modification
  • click Data Streams.
Click iOS app, Android app, or Web.
  • Enter the URL of your primary website, e.g., "example.com", and a Stream name, e.g. "Example, Inc. (web stream)".

  • You have the option to enable or disable enhanced measurement
  • Click Create stream.

  • If you successfully create a stream, you will be directed to the stream details Web page

Set up the Google tag

Step 1: Create a Google tag

Create an account if you don't already have an account
Install Google Tag Manager on your site by going to Admin --> Install Google Tag Manager
Copy the code to the header and body of your site by going to your Typedream Workspace --> site settings --> code injection -→ Don't forget to click update settings to save the changes

Go to workspace in Google Tag Manager and select the container you want to configure. Open the  Tags menu.
Create a New tag. Enter a name for the tag at the top (e.g., "Google tag configuration - example.com").
In the Tag Configuration box, select Google tag.
Configure your tag. In the field Tag ID, enter your Google tag ID. To get the measure ID, you can return to your Google Analytics page and go to Admin --> Data Stream --> Select your data stream

Save your Google tag.

Step 2: Create a trigger

Next, set up a trigger to load the Google tag when someone loads your website.

To ensure that the Google tag fires before other triggers, click Triggering and use the Initialization - All pages trigger. Learn more about Page triggers.
Name the tag and Save the tag configuration.

Result

Your tag configuration should look like this:

Step 3: Verify your tag works

To make sure your tag works as intended:

In your Workspace, click Preview. Tag Assistant opens.
Enter your site's URL.
Check if the Google Analytics: GA4 Configuration fired when the page loaded.
  • ✅ If your tag fired successfully, the Tag Assistant UI look like this:
  • ❌ If your tag didn't fire, check your tag's trigger settings.
You can also check your site's renderer by opening inspect element --> network --> refresh your browser --> see GTM container has been loaded and Google analytic tag is running
When you are done with debugging, close Preview mode.
In your Works
pace, click Submit to publish your changes.

For more details, you may check on the complete video guide below


We're a remote software company, building online tools for creators, builders, and side hustlers. We quit our 9-5 to pursue our dreams, and we want to help others do the same.

Typedream - No-code site builder, easy as Notion, pretty as Webflow | Product Hunt

Backed by

Copyright © 2023 Govest, Inc. All rights reserved.

Made in Typedream