🖥️Web Installations

Crunch can be installed on any frontend web application built using any framework, some popular ones are listed here:

Step 1:

Get the App_ID for your project to install Crunch scripts in your project.

You can find your Crunch's project ID as follows —

1. During the new project creation in the script installation setup.

2. In the project level settings within Crunch App.

3. Reach out to your Crunch account manager to provide you with an ID

---

Step 2:

Select the script which is relevant for your project.

Plain HTML app, Create React App, Vue JS, Angular, Svelte, Preact, Semantic UI —

<script 
    src="https://storage.googleapis.com/crunch_tracking_script/crunchit.min.js"
    onload="init()"
    async
>
</script>
<script>
    function init() {
    try {
        window.letscrunch("YOUR_UNIQUE_APP_ID");
    } catch (error) {
        console.error("Failed to load Crunch", error);
    }
    }
</script>

NextJS applications (in _app.js) —

export default function App({ Component, pageProps }) {
  useEffect(() => {
    if (window.letscrunch) {
      try {
        window.letscrunch("YOUR_UNIQUE_APP_ID");
      } catch (error) {
        console.error("Failed to load Crunch", error);
      }
    }
  }, []);
  return (
    <>
      <Script
        src="https://storage.googleapis.com/crunch_tracking_script/crunchit.min.js"
        strategy="beforeInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

Gatsby JS applications —

1. Run this if you do not have html.js file in your src directory - cp .cache/default-html.js src/html.js

2. Add this before the end of your body tag

<script src="https://storage.googleapis.com/crunch_tracking_script/crunchit.min.js"
async
/>
<script
dangerouslySetInnerHTML={{
__html: `
    function init() {
      try {
        window.letscrunch("YOUR_UNIQUE_APP_ID");
      } catch (error) {
        console.error("Failed to load Crunch", error);
      }
    }
    if (window.addEventListener)
      window.addEventListener("load", init);
    else if (window.attachEvent)
      window.attachEvent("onload", init);
    else window.onload = init;
  `,
  }}
/>