Squarespace

Add AppFit to Your Squarespace Site‍

Access Your Squarespace Account

Log into your Squarespace account and make sure you have the necessary permissions to edit your site’s settings, particularly the ability to add custom code.

Set Up an AppFit Account

Sign up for an AppFit account if you haven’t already. Create your company profile within AppFit.

Choose the appropriate Industry, Platform, and Focus for your business. Based on these choices, AppFit will suggest relevant metrics to track.

Get Your API Key

Navigate to the "Integrations" section within the AppFit dashboard.

For now, retrieve your API Key from either the Amplitude or Segment integration settings by copying it.

‍

Configure Your Squarespace Site:

Go to your Squarespace dashboard. Select "Settings" and then choose "Advanced" followed by "Code Injection".

Paste the following JavaScript in the "Header" section:

<script>
  window.AppFit = {
    cache: {},
    trackEvent(eventName, payload) {
      if (!window.AppFit.cache) {
        window.AppFit.cache = {}
      }
      if (!window.AppFit.cache.events) {
        window.AppFit.cache.events = [];
      }
      window.AppFit.cache.events.push({ eventName: eventName, payload: payload })

      return Promise.resolve();
    },
    identifyUser(userId) {
      if (!window.AppFit.cache) {
        window.AppFit.cache = {}
      }
      window.AppFit.cache.identity = userId;
    }
  };
  function startAppFit(apiKey) {
    window.AppFit.apiKey = apiKey;
    var script = document.createElement('script');
    script.type = 'module';
    script.src = 'https://d1433kipn7zjh1.cloudfront.net/appfit.js';
    var fallbackScript = document.createElement('script');
    fallbackScript.noModule = true;
    fallbackScript.src = 'https://d1433kipn7zjh1.cloudfront.net/appfit-legacy.js';
    var first = document.getElementsByTagName('script')[0];
    first.parentNode.insertBefore(script, first);
    first.parentNode.insertBefore(fallbackScript, first);
  }
  startAppFit('WRITE KEY');
</script>
<script>
    window.AppFit.trackEvent('screen_viewed', { screen: window.location.pathname })
</script>

‍Replace 'YOUR_API_KEY' with your actual AppFit API key.‍

Publish Your Changes

After adding the code, save your changes and publish your site. This will activate the AppFit tracking on your site.

‍Verify Integration

Once live, monitor the AppFit dashboard to ensure events are being recorded and metrics are updating as expected.