Google Tag ManagerStep by step, no jargon

1. Go to tagmanager.google.com and sign in with your Google account.
2. Click Create Account.
3. Account Name: type Constructonik.
4. Country: United States.
5. Container name: type constructonik.com.
6. Target platform: choose Web.
7. Click Create, then accept the Terms of Service.

At the top right of the GTM screen, you'll now see a code that looks like GTM-XXXXXXX. Write this down — you'll need it if anyone else has to find your container later.

1. Go to analytics.google.com.
2. Click Admin (gear icon, bottom left).
3. Under the Account column, click Create Account if you don't have one — name it Constructonik.
4. Under the Property column, click Create Property.
5. Property name: constructonik.com. Set your time zone (Eastern Time — US) and currency (USD).
6. Fill in the basic business details when asked (industry: Home & Garden or Construction, business size, and how you intend to use Analytics — tick Generate leads).
7. Click Create.

1. Still in Admin, under the Property column, click Data Streams.
2. Click Add stream → Web.
3. Website URL: https://constructonik.com
4. Stream name: Constructonik Website
5. Click Create stream.

1. Back in tagmanager.google.com, open your constructonik.com container.
2. Click Tags in the left menu.
3. Click New (top right).
4. Click the pencil icon next to "Untitled Tag" and rename it: GA4 - Google Tag - All Pages
5. Click the Tag Configuration box.
6. Choose Google Tag from the list.
7. Paste your Measurement ID (G-XXXXXXXXXX) from Step 2.2 into the field.
8. Click the Triggering box below it.
9. Choose Initialization - All Pages.
10. Click Save (top right).

Regular websites: click a link → browser reloads → GA4 tag fires again automatically. This site: click a link → React quietly swaps the content → the browser never reloads → the GA4 tag never fires again.

Whoever maintains the React code needs to add a small snippet that tells GTM "the page changed" every time the URL changes. Send them this:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function usePageViewTracking() {
  const location = useLocation();

  useEffect(() => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'virtual_page_view',
      page_path: location.pathname + location.search,
      page_title: document.title
    });
  }, [location]);
}

// Call usePageViewTracking() once near the top of your root component

This pushes a message into GTM every single time the visible page changes — even though the browser itself hasn't reloaded.

1. In GTM, click Triggers in the left menu.
2. Click New.
3. Name it: Virtual Pageview - Route Change
4. Click Trigger Configuration → choose Custom Event.
5. Event name: type exactly virtual_page_view (must match the code above precisely).
6. Leave it set to fire on All Custom Events.
7. Click Save.

Your first GA4 tag (Part 3) fires once, on the very first load. This one fires every time someone navigates afterwards.

1. Click Tags → New.
2. Name it: GA4 - Pageview - Route Change
3. Tag Configuration → choose Google Analytics: GA4 Event.
4. Configuration Tag: select the GA4 - Google Tag - All Pages tag you made in Part 3, from the dropdown.
5. Event Name: type page_view
6. Under Event Parameters, add two rows:
   • page_path → {{Page Path}} (create this variable if prompted, using a Data Layer Variable named exactly page_path)
   • page_title → {{Page Title}} (same idea, Data Layer Variable named page_title)
7. Triggering: choose the Virtual Pageview - Route Change trigger you just built.
8. Click Save.

1. In analytics.google.com, click Admin.
2. Confirm the constructonik.com property is selected at the top.
3. Under Product Links, click Google Ads Links.
4. Click Link.
5. Click Choose Google Ads accounts and select the Constructonik Ads account.
6. Continue through the setup screens.
7. Turn on the available advertising/personalisation options — these let Ads use your Analytics data for things like remarketing audiences.
8. Click Submit.

1. Go to ads.google.com.
2. Click Tools → Data Manager → Connected Products.
3. Find Google Analytics (GA4) & Firebase.

This is a small, "always-on" tag Google Ads needs in order to accurately match clicks to conversions later. Add it once, now, before you build any individual conversion actions.

1. In GTM, click Tags → New.
2. Name it: Google Ads - Conversion Linker - All Pages
3. Tag Configuration → choose Conversion Linker.
4. Triggering: choose All Pages.
5. Click Save.

Individual conversion actions get added on top of this foundation. For a home builder, the ones worth setting up first are:

Each of these needs its own small tag once you know which actions matter most — that's a short follow-up task once tracking is live and we can see real form/button names in GTM's Preview mode.

1. In GTM, click Preview (top right).
2. Type https://constructonik.com and click Connect.
3. A new tab opens with your site, plus a "Tag Assistant" panel connected to it.

1. On first load, confirm GA4 - Google Tag - All Pages and Google Ads - Conversion Linker - All Pages both show as Fired in the Tag Assistant panel.
2. Now click through to a couple of different sections of the site — a model page, then Contact — without refreshing the browser.
3. Each time, confirm GA4 - Pageview - Route Change fires in the panel. This is the check that proves Part 4 is working — if it doesn't fire here, GA4 will undercount every visit once this goes live.
4. Submit any test forms you have and confirm the events you expect show up.

1. Open analytics.google.com in another tab.
2. Go to Reports → Realtime.
3. While still clicking around your Preview tab, confirm you see yourself as an active user, and that each page you visit shows up.

1. Close the Preview tab and return to GTM.
2. Click Submit (top right).
3. Click Publish and Create Version.
4. Version name: Initial GA4 & Google Ads Tracking Setup
5. Click Publish.