WordPress

Add AppFit to Your WordPress Site

Access Your WordPress Admin Panel

Log into your WordPress dashboard and make sure you have administrative privileges to modify theme files or add plugins.

Set Up an AppFit Account

If you haven’t already, create an account on AppFit.

During setup, select the appropriate Industry, Platform, and Focus for your company. AppFit will suggest metrics to track based on these selections.‍

Obtain Your API Key

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

Retrieve your API Key from an integration like Amplitude or Segment by copying it from there.

‍Install a Custom Script Plugin (If Needed):

If your theme does not allow direct code injection, install a plugin that enables you to add custom JavaScript to your site. Plugins like "Insert Headers and Footers" or "WP Add Custom JS" are good options.

Add the JavaScript Code:

If you're using a plugin, follow the plugin's instructions to add the following code to the header section of your site. If you can edit the theme's header.php file directly, insert the code before the closing </head> tag:

<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 the actual API key you obtained from AppFit.

Save Changes and Publish:

After inserting the code, save the changes to your theme or plugin. Check your site to ensure that it still loads correctly.‍

Verify the Integration

Monitor your AppFit dashboard to confirm that events from your WordPress site are being tracked and metrics are updating.

‍