Installing Google Tag Manager on Carrd

Google Tag Manager (GTM) allows you to manage all your marketing and analytics tags from a single platform. This guide covers how to install GTM on your Carrd site and configure it for optimal tracking.

Prerequisites

Before installing GTM on Carrd, you need:

1. A Carrd Pro account (Pro Lite, Pro Standard, or Pro Plus)
2. A Google Tag Manager account - Create one free
3. A GTM container for your website
4. Published Carrd site (GTM only works on published sites)

Note: GTM is not available on free Carrd accounts because it requires custom code via embed elements.

Why Use GTM on Carrd?

Benefits of GTM

• Centralized tag management: Manage all tags (GA4, Meta Pixel, etc.) in one place
• No code deployments: Add/edit/remove tags without republishing your Carrd site
• Performance optimization: Load tags asynchronously and conditionally
• Version control: Roll back changes if something breaks
• Team collaboration: Multiple team members can manage tags
• Advanced tracking: Complex event tracking without custom code in Carrd

When to Use GTM vs. Direct Installation

Use GTM if:

• You need to manage multiple marketing tags (GA4, Meta Pixel, LinkedIn, etc.)
• You want to add/remove tags frequently
• You need advanced tracking (custom events, triggers, variables)
• You work with a marketing team that needs tag access

Use direct installation if:

• You only need one or two simple tags
• You rarely change tracking configuration
• You want minimal complexity

Step 1: Create a GTM Container

1. Go to Google Tag Manager
2. Click Create Account
3. Fill in account details:
   • Account Name: Your name or company
   • Country: Your location
4. Set up container:
   • Container Name: Your Carrd site name or domain
   • Target Platform: Select Web
5. Click Create
6. Accept the Terms of Service

Step 2: Get Your GTM Container Code

After creating your container, you'll see installation instructions with two code snippets:

Head Code

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Body Code

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Copy both code snippets - you'll need them for Carrd.

Step 3: Add GTM to Your Carrd Site

Install Head Code (JavaScript)

1. Open your Carrd site in the editor
2. Click the + (Controls) button
3. Select General > Embed
4. Place the embed at the top of your page (very first element)
5. Click on the embed element
6. Select Code as the embed type
7. Paste the GTM head code (the <script> tag)
8. (Optional) Add this CSS to hide the embed:

display: none;

9. Click Done

Install Body Code (Noscript Fallback)

1. Add another Embed element immediately after the first
2. Click on this second embed
3. Select Code as the embed type
4. Paste the GTM body code (the <noscript> tag)
5. Add this CSS to ensure it's hidden:

display: none;

6. Click Done
7. Click Publish to publish your site

Single Embed Method (Alternative)

You can also combine both snippets into one embed:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Replace GTM-XXXXXXX with your actual container ID.

Step 4: Verify GTM Installation

Using GTM Preview Mode

1. Go to Google Tag Manager
2. Select your container
3. Click Preview in the top right
4. Enter your published Carrd site URL
5. Click Connect
6. A new tab will open showing your site with GTM debug panel
7. Verify "Container Loaded" message appears

Using Browser Developer Tools

1. Open your published Carrd site
2. Press F12 to open Developer Tools
3. Go to Console tab
4. Type: google_tag_manager
5. Press Enter
6. You should see an object with your GTM container ID

Using Google Tag Assistant

1. Install Google Tag Assistant
2. Visit your published Carrd site
3. Click the Tag Assistant icon
4. Verify Google Tag Manager is detected
5. Check that container ID is correct

Step 5: Configure Tags in GTM

Now that GTM is installed, configure your tags.

Add Google Analytics 4

1. In GTM, click Tags > New
2. Click Tag Configuration
3. Select Google Analytics: GA4 Configuration
4. Enter your GA4 Measurement ID (G-XXXXXXXXXX)
5. Click Triggering
6. Select All Pages
7. Name the tag "GA4 - Configuration"
8. Click Save

Add Meta Pixel

1. Click Tags > New
2. Click Tag Configuration
3. Select Custom HTML
4. Paste your Meta Pixel base code
5. Click Triggering
6. Select All Pages
7. Name the tag "Meta Pixel - Base Code"
8. Click Save

Add Conversion Tracking

1. Click Tags > New
2. Click Tag Configuration
3. Select Google Analytics: GA4 Event
4. Set Configuration Tag to your GA4 Configuration tag
5. Set Event Name to generate_lead
6. Click Triggering
7. Click + to create new trigger
8. Select Form Submission
9. Configure trigger settings
10. Name the tag "GA4 - Form Submission"
11. Click Save

Step 6: Publish GTM Container

1. Click Submit in GTM
2. Add Version Name (e.g., "Initial Carrd Setup")
3. Add Version Description (optional)
4. Click Publish

Your tags are now live on your Carrd site!

Carrd-Specific GTM Configuration

Built-in Variables

Enable these built-in variables for Carrd tracking:

1. Go to Variables in GTM
2. Click Configure in the Built-In Variables section
3. Enable:
   • Click Element
   • Click Text
   • Click URL
   • Form Element
   • Form Text
   • Page URL
   • Page Hostname
   • Referrer

Custom Variables

Create useful custom variables for Carrd:

Page Type Variable

1. Go to Variables > New
2. Click Variable Configuration
3. Select Constant
4. Set value to landing_page or portfolio or link_in_bio
5. Name it "Page Type"
6. Click Save

UTM Parameters

Create variables for each UTM parameter:

1. Variables > New
2. Variable Configuration > URL
3. Component Type: Query
4. Query Key: utm_source
5. Name: "UTM Source"
6. Repeat for utm_medium, utm_campaign, utm_content, utm_term

Triggers for Carrd

Form Submission Trigger

1. Triggers > New
2. Trigger Configuration > Form Submission
3. This trigger fires on: All Forms
4. Name: "All Form Submissions"
5. Save

Note: Test thoroughly - Carrd forms redirect quickly, may need sendBeacon in tags.

Outbound Link Click Trigger

1. Triggers > New
2. Trigger Configuration > Click - All Elements
3. This trigger fires on: Some Clicks
4. Add condition: Click URL does not contain \{\{Page Hostname\}\}
5. Add condition: Click URL starts with http
6. Name: "Outbound Links"
7. Save

Scroll Depth Trigger

1. Triggers > New
2. Trigger Configuration > Scroll Depth
3. Vertical Scroll Depths: 25, 50, 75, 100
4. Name: "Scroll Depth"
5. Save

Perfect for Carrd's one-page layout!

Button Click Trigger

1. Triggers > New
2. Trigger Configuration > Click - All Elements
3. This trigger fires on: Some Clicks
4. Add condition: Click Classes contains button
5. Name: "Button Clicks"
6. Save

Data Layer for Carrd

Carrd doesn't have native data layer support, but you can push custom data:

Push Custom Events

Add an embed to push custom events:

<script>
window.dataLayer = window.dataLayer || [];

// Push custom data on page load
dataLayer.push({
  'event': 'carrdPageLoad',
  'pageType': 'landing_page',
  'siteVersion': 'v1.0'
});
</script>

Push Form Submission Data

<script>
document.addEventListener('DOMContentLoaded', function() {
  var forms = document.querySelectorAll('form');

  forms.forEach(function(form) {
    form.addEventListener('submit', function() {
      dataLayer.push({
        'event': 'formSubmit',
        'formId': form.getAttribute('id') || 'contact_form'
      });
    });
  });
});
</script>

Then create a Custom Event trigger in GTM:

• Event name: formSubmit

Best Practices for Carrd + GTM

1. Performance Optimization

Carrd sites are fast - keep them fast with GTM:

• Async loading: GTM loads asynchronously by default
• Conditional tags: Only load tags when needed
• Tag sequencing: Load critical tags first
• Minimize custom HTML: Use built-in tag templates when possible

2. Tag Organization

Keep your GTM container organized:

• Naming convention: Use "Tool - Action" format (e.g., "GA4 - Page View")
• Folders: Group related tags in folders
• Comments: Add notes to complex tags
• Version descriptions: Document what changed in each version

3. Testing Workflow

Always test before publishing:

1. Make changes in GTM
2. Click Preview
3. Test on published Carrd site
4. Verify tags fire correctly
5. Check for JavaScript errors
6. Submit and publish

4. Form Tracking Considerations

Carrd forms redirect quickly. Use these strategies:

Option 1: Event Callback

In your form submission tag (Custom HTML):

<script>
  gtag('event', 'form_submit', {
    'event_callback': function() {
      // Form can redirect now
    },
    'event_timeout': 2000
  });
</script>

Option 2: SendBeacon

<script>
  navigator.sendBeacon('https://www.google-analytics.com/collect', 'payload');
</script>

Option 3: Add Delay

In form submission tag, add slight delay:

<script>
  setTimeout(function() {
    // Allow time for tag to fire
  }, 500);
</script>

Common Use Cases

Landing Page Tracking

Tags to add:

• GA4 Configuration (all pages)
• GA4 Event - Form Submit (form submission trigger)
• GA4 Event - Button Click (button click trigger)
• GA4 Event - Scroll Depth (scroll trigger)
• Meta Pixel - Base Code (all pages)
• Meta Pixel - Lead Event (form submission trigger)

Link-in-Bio Page

Tags to add:

• GA4 Configuration (all pages)
• GA4 Event - Link Click (outbound link trigger)
• GA4 Event - Scroll Depth (scroll trigger)
• Social pixel of choice (Instagram, TikTok, etc.)

Portfolio Site

Tags to add:

• GA4 Configuration (all pages)
• GA4 Event - Project Click (custom trigger)
• GA4 Event - Resume Download (file download trigger)
• GA4 Event - Contact Form (form submission trigger)
• LinkedIn Insight Tag (if relevant)

Troubleshooting

GTM Not Loading

Problem: GTM container doesn't load on Carrd site.

Solutions:

1. Verify Carrd Pro: GTM requires a Pro plan
2. Check site is published: GTM doesn't work in Carrd preview
3. Verify container ID: Ensure GTM-XXXXXXX is correct
4. Check embed placement: GTM embed should be first element on page
5. Look for JavaScript errors: Open browser console (F12)
6. Clear cache: Hard reload (Ctrl+Shift+R)

Tags Not Firing

Problem: GTM loads but tags don't fire.

Solutions:

1. Check triggers: Verify trigger conditions are met
2. Use Preview mode: Debug with GTM preview
3. Check tag type: Ensure correct tag template is used
4. Verify IDs: Double-check measurement IDs, pixel IDs, etc.
5. Test in incognito: Rule out browser extensions blocking tags
6. Check firing order: Some tags depend on others

Form Tracking Not Working

Problem: Form submission tags don't fire on Carrd.

Solutions:

1. Use sendBeacon: Carrd forms redirect quickly
2. Add event callback: Delay form redirect
3. Test timing: Add small delay before redirect
4. Check trigger: Form submission trigger may need adjustment
5. Use dataLayer push: Manually push form event to dataLayer

Duplicate Events

Problem: Events fire multiple times.

Solutions:

1. Remove duplicate tags: Check for tags with same trigger
2. Remove direct installation: If using GTM, remove direct GA4/Pixel code
3. Check trigger conditions: Ensure triggers aren't overlapping
4. Version control: Roll back to previous GTM version

Security and Privacy

Cookie Consent

Implement consent before loading tags:

1. Create Consent Initialization tag (Custom HTML):

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  gtag('consent', 'default', {
    'analytics_storage': 'denied',
    'ad_storage': 'denied'
  });
</script>

Trigger: Consent Initialization - All Pages

2. Create Consent Update tag for after user accepts:

<script>
  gtag('consent', 'update', {
    'analytics_storage': 'granted',
    'ad_storage': 'granted'
  });
</script>

Trigger: Custom event when user accepts cookies

Data Privacy

• PII protection: Never send email, phone, or names to analytics
• IP anonymization: Enable in GA4 settings
• Data retention: Configure appropriate retention periods
• Privacy policy: Update to reflect GTM and all tags

Advanced Configuration

Custom JavaScript Variables

Create variables for complex logic:

function() {
  // Example: Detect mobile device
  return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) ? 'mobile' : 'desktop';
}

Enhanced Ecommerce (Limited on Carrd)

Carrd doesn't have native ecommerce, but you can track external purchases:

<script>
  // Track click to external purchase link
  document.querySelectorAll('a[href*="gumroad.com"]').forEach(function(link) {
    link.addEventListener('click', function() {
      dataLayer.push({
        'event': 'purchaseIntent',
        'productUrl': this.href
      });
    });
  });
</script>

Next Steps

• Configure GA4 Events via GTM
• Set Up Meta Pixel via GTM
• Troubleshoot Tracking Issues
• Optimize Performance

Additional Resources

• Google Tag Manager Documentation
• GTM Fundamentals
• Carrd Embed Documentation
• GTM Community