Installation

Add the June SDK to your app in minutes

Install

Installing the June SDK is very simple - just pick your language and add the code below to your codebase.

Browser

Install this tracking script in the <head> tag of your website.

<script>
  window.analytics = {};
  function juneify(writeKey) {
      window.analytics._writeKey = writeKey;
      var script = document.createElement("script");
      script.type = "application/javascript";
      script.onload = function () {
          window.analytics.page();
      }
      script.src = "https://unpkg.com/@june-so/analytics-next/dist/umd/standalone.js";
      var first = document.getElementsByTagName('script')[0];
      first.parentNode.insertBefore(script, first);
  }
  juneify("YOUR_WRITE_KEY");
</script>

Install the npm package

npm install @june-so/analytics-next --save

// Import June SDK:
import { AnalyticsBrowser } from '@june-so/analytics-next';

// Near the entrypoint of your app, instantiate AnalyticsBrowser:
let analytics = AnalyticsBrowser.load({
  writeKey: 'YOUR_WRITE_KEY',
});

Using React

Implement a hook that can be used throughout your React app:

import { useEffect, useState } from 'react';
import { AnalyticsBrowser } from '@june-so/analytics-next';

export function useJune(writeKey) {
  const [analytics, setAnalytics] = useState(undefined);

useEffect(() => {
    const loadAnalytics = async () => {
      let response = AnalyticsBrowser.load({
        writeKey,
      });
      setAnalytics(response);
    };
    loadAnalytics();
  }, [writeKey]);

return analytics;
}

Now you can use the hook in any component, like:

import { useCallback } from 'react';
import { useJune } from './useJune';

function PurchaseButton() {
  const analytics = useJune('YOUR_WRITE_KEY');

const trackPurchase = useCallback(() => {
    if (analytics) analytics.track('Purchase Event');
  }, [analytics]);

return <button onClick={trackPurchase}>Purchase coat</button>;
}

Using NextJS

For a NextJS app, the best approach is installing the NPM package rather than using the inlined script. Tracking is rather similar to the React example above. You can reuse the hook above in your NextJS app, here's how:

import { useCallback } from 'react';
import { useJune } from './useJune';

function PurchaseButton() {
  const analytics = useJune('YOUR_WRITE_KEY');

const trackPurchase = useCallback(() => {
    if (analytics) analytics.track('Purchase Event');
  }, [analytics]);

return <button onClick={trackPurchase}>Purchase coat</button>;
}

For tracking pageview events, you can do the following:

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function MyApp({ Component, pageProps }) {
  const analytics = useJune('YOUR_WRITE_KEY');
  const router = useRouter();

useEffect(() => {
    const handleRouteChange = (url, { shallow }) => {
      if (analytics) analytics.page(url);
    };

router.events.on('routeChangeStart', handleRouteChange);

return () => {
      router.events.off('routeChangeStart', handleRouteChange);
    };
  }, [analytics]);

return <Component {...pageProps} />;
}

Install the SDK for Server

npm install @june-so/analytics-node --save

// Import June SDK:
import { Analytics } from '@june-so/analytics-node';

// Instantiate the client:
const analytics = new Analytics('YOUR_WRITE_KEY');

Install the SDK for Python

pip install june-analytics-python

from june import analytics

analytics.write_key = "YOUR_WRITE_KEY"

Install the SDK for Ruby

gem install june-analytics-ruby

require 'june/analytics'

Analytics = June::Analytics.new({
  write_key: 'YOUR_WRITE_KEY'
})

If you're using Rails, you can create a config/initializers/analytics_ruby.rb file and add the following code:

require 'june/analytics'

Analytics = June::Analytics.new({
  write_key: 'YOUR_WRITE_KEY',
  on_error: proc { |_status, msg| print msg },
  stub: !Rails.env.production?
})

Next: Identify your users

After installing the SDK, the next step is to identify your users & companies.

See how to identify users →