Carrd provides multiple methods to integrate third-party analytics, marketing, and tracking tools into your one-page sites. Understanding the available integration options helps you choose the right approach for your Carrd Pro sites.
Prerequisites
Important: Most third-party integrations require Carrd Pro. The free version of Carrd does not support custom code or integrations.
Carrd Pro Features Required
- Custom Domain capability (Pro Lite, Pro Standard, or Pro Plus)
- Access to Embed element for custom HTML/JavaScript
- Published site (integrations only work on published sites)
Integration Methods
1. Embed Element (Primary Method)
The Embed element is the main way to add custom code to Carrd sites:
- Access: Add via Controls (+) > General > Embed
- Code types: HTML, CSS, and JavaScript
- Placement: Can be added anywhere in your one-page layout
- Best for: Analytics tags, tracking pixels, custom scripts
- Requires: Carrd Pro plan
How to Add an Embed
- Open your Carrd site in the editor
- Click the + (Controls) button
- Select General > Embed
- Place the embed element where you want it
- Click Edit on the embed element
- Choose embed type:
- Code: For HTML/JavaScript (most common for tracking)
- HTML: For pure HTML content
- Style: For custom CSS
- Paste your tracking code
- Click Done
- Publish your site
2. Head/Footer Code (Deprecated)
Older Carrd sites may have had Head/Footer code options, but this has been replaced by the Embed element. All custom code should now use Embed elements.
3. Positioning Embed Elements
Strategic placement of embed elements affects tracking:
- Top of page: For tracking scripts that need to load early (GA4, GTM)
- After forms: For form tracking scripts
- Bottom of page: For non-critical scripts (performance optimization)
- Hidden embeds: Set embed to
display: noneif it doesn't render visible content
Available Integrations
Analytics & Tag Management
- Google Analytics 4: Track user behavior and site performance
- Google Tag Manager: Centralized tag management for all marketing and analytics tags
- Plausible Analytics: Privacy-friendly analytics via embed
- Fathom Analytics: Simple, privacy-focused analytics
- Mixpanel: Product analytics via custom code
Marketing & Advertising
- Meta Pixel: Facebook and Instagram advertising tracking
- TikTok Pixel: TikTok advertising tracking via embed
- LinkedIn Insight Tag: LinkedIn advertising via embed
- Twitter Pixel: Twitter advertising tracking
- Pinterest Tag: Pinterest advertising tracking
- Reddit Pixel: Reddit advertising tracking
Email Marketing
- Mailchimp: Native form integration available
- ConvertKit: Form embedding and tracking
- EmailOctopus: Form integration
- Substack: Subscription form embeds
- Buttondown: Newsletter subscription forms
Payment & Donations
- Stripe: Payment links and checkout forms
- PayPal: Payment buttons via embed
- Buy Me a Coffee: Donation buttons
- Ko-fi: Creator support buttons
- Gumroad: Product embeds
Integration Best Practices
1. Load Order and Performance
Since Carrd is optimized for speed, be mindful of integrations:
- Minimize embeds: Only add essential tracking tags
- Async loading: Use async/defer attributes when possible
- Test performance: Monitor page load after adding integrations
- Consider GTM: Use Google Tag Manager to consolidate multiple tags
- One tracking solution: Avoid installing multiple analytics platforms
2. Embed Placement Strategy
Critical Tracking (Top of Page)
Place these embeds early in your page layout:
- Google Analytics 4
- Google Tag Manager
- Meta Pixel base code
- Critical conversion tracking
Form Tracking (After Forms)
Place these embeds immediately after form elements:
- Form submission tracking
- Lead generation pixels
- Conversion tracking specific to forms
Non-Critical (Bottom of Page)
Place these embeds at the bottom:
- Chat widgets
- Social media feeds
- Non-essential widgets
- Performance monitoring scripts
3. Testing and Validation
- Carrd preview mode: Test in preview before publishing
- Published site testing: Always verify on published site (tracking may not work in preview)
- Browser testing: Test across different browsers
- Use debugging tools: Google Tag Assistant, Meta Pixel Helper
- Mobile testing: Verify on mobile devices (Carrd is mobile-first)
4. Code Organization
- Comment your embeds: Add HTML comments to identify each embed
- One purpose per embed: Keep tracking codes separate for easier management
- Naming convention: Name embeds clearly in Carrd editor
- Document changes: Keep a record of what embeds you've added
Carrd-Specific Considerations
One-Page Architecture
Carrd's one-page design affects tracking:
- No multi-page tracking: All tracking happens on a single page load
- Section scrolling: Track scroll depth to measure engagement
- Anchor navigation: Internal links don't trigger new page views
- Form submissions: Primary conversion action on most Carrd sites
- Exit tracking: Outbound link tracking is more important
Carrd Pro Requirements
Integration capabilities by plan:
| Feature | Free | Pro Lite | Pro Standard | Pro Plus |
|---|---|---|---|---|
| Embed elements | ✗ | ✓ | ✓ | ✓ |
| Custom domain | ✗ | ✓ (1) | ✓ (3) | ✓ (10) |
| Form integrations | Limited | ✓ | ✓ | ✓ |
| Analytics tracking | ✗ | ✓ | ✓ | ✓ |
| Number of sites | 3 | 10 | 25 | Unlimited |
Bottom line: You need at least Carrd Pro Lite ($9/year) for third-party integrations.
Performance Considerations
Carrd sites are extremely fast by default. Keep them fast:
- Baseline: Carrd sites typically achieve 95+ PageSpeed scores
- Each embed adds overhead: Be selective about what you add
- Async is essential: Always use async/defer on script tags
- GTM is recommended: Consolidate tags to minimize requests
- Monitor Core Web Vitals: Check LCP, CLS, and FID after adding integrations
Mobile-First Design
Carrd is mobile-first, so ensure tracking works on mobile:
- Test on mobile devices: Carrd's primary use case is mobile landing pages
- Responsive embeds: Ensure embedded content is mobile-friendly
- Touch event tracking: Consider tracking touch interactions
- Mobile forms: Test form submission tracking on mobile
- Mobile performance: Prioritize mobile performance over desktop
Form Integration
Carrd's built-in forms have native integrations:
- Native integrations: Mailchimp, EmailOctopus, and others
- Custom form tracking: Use embeds to track form submissions
- Success redirect: Track conversions when form succeeds
- Form validation: Ensure tracking doesn't interfere with validation
- Multiple forms: Each form can have different tracking
Common Use Cases
Landing Page Tracking
Optimize single-page performance tracking:
- Page load tracking: Basic GA4 or GTM setup
- Scroll depth: Measure engagement on long landing pages
- CTA clicks: Track button and link interactions
- Form submissions: Primary conversion tracking
- Social proof: Track engagement with testimonials or reviews
Portfolio Sites
Track creative work engagement:
- Project views: Track scrolling to different portfolio sections
- External link clicks: Monitor clicks to live projects or GitHub
- Contact form: Track inquiries from portfolio
- Download tracking: Monitor resume or file downloads
- Social links: Track clicks to social profiles
Link-in-Bio Pages
Alternative to Linktree with better tracking:
- Link clicks: Track every external link
- Section engagement: Measure which sections get attention
- Social media tracking: Monitor which platforms get traffic
- Newsletter signups: Track email list growth
- Product links: Monitor affiliate or product link clicks
Event Pages
Track event registrations and engagement:
- Registration tracking: Monitor form submissions
- Ticket link clicks: Track clicks to external ticketing
- Calendar adds: Track when users add to calendar
- Social sharing: Monitor event sharing
- Information engagement: Scroll tracking for event details
Product Launch Pages
Pre-launch and launch tracking:
- Waitlist signups: Track email collection
- Launch day traffic: Monitor initial traffic surge
- CTA effectiveness: A/B test different call-to-action buttons
- Feature interest: Track scrolling to feature sections
- Early bird conversions: Monitor special offer conversions
Limitations and Workarounds
No Server-Side Tracking
Carrd is purely client-side, so:
- Limitation: No server-side analytics or server-to-server tracking
- Workaround: Use Zapier or Webhooks with form submissions for server-side events
- Alternative: Redirect to a tracking URL that captures server-side data
Limited Dynamic Content
Carrd is static, so:
- Limitation: Can't dynamically update content based on user behavior
- Workaround: Use JavaScript in embeds to show/hide elements
- Alternative: Use query parameters to customize content
No Native Ecommerce
Carrd doesn't have built-in ecommerce:
- Limitation: No native shopping cart or checkout
- Workaround: Use Gumroad, Stripe, or PayPal embeds
- Tracking: Track clicks to external purchase links
Form Submission Tracking Delay
Carrd forms redirect or show success state:
- Limitation: Tracking may not fire before redirect
- Workaround: Use
navigator.sendBeacon()for guaranteed tracking - Alternative: Add slight delay before form redirect
Next Steps
Choose your integration path:
- Install Google Analytics 4 for basic site analytics
- Set up Google Tag Manager to manage multiple tags efficiently
- Configure Meta Pixel for Facebook and Instagram advertising
- Explore troubleshooting if you encounter integration issues