Framer

Prerequisites

• An Alytica account
• Client ID (and optional Client Secret)
• A Framer website project

Step 1: Obtain Your Tracking Script

1. Log in to your Alytica dashboard
2. Navigate to the Web Tracking section
3. Copy your unique tracking script

Step 2: Add Script to Framer

1. Open your Framer project
2. Go to Project Settings
3. Select the "Custom Code" or "Head Code" section
4. Paste the following script before the closing </head> tag:

<script>
  window.alytica = window.alytica || { q: [] };
  alytica.q.push(['init', {
    clientId: 'YOUR_CLIENT_ID',
    // Optional configurations
    trackPageViews: true,
    trackWebVitals: true,
    trackOutgoingLinks: true
  }]);
</script>
<script src="https://app.alytica.tech/script.js" async></script>

Step 3: Configure Tracking Options

• trackPageViews: Automatically track page navigation
• trackWebVitals: Monitor website performance metrics
• trackOutgoingLinks: Track clicks on external links

Step 4: Verify Installation

1. Publish your Framer site
2. Open the browser console
3. Check for Alytica initialization message

Advanced Tracking

Custom Event Tracking

Add custom events using the Alytica method:

alytica('track', 'button_click', {
  buttonName: 'Contact Form',
  location: 'Homepage'
});

User Identification

Identify users when they log in or create an account:

alytica('identify', 'user123', {
  email: 'user@example.com',
  firstName: 'John',
  plan: 'Pro'
});

Troubleshooting

• Ensure Client ID is correct
• Check browser console for any initialization errors
• Verify script is loaded in page source