crunchit/README.md

Autotrack the events from your users

# crunchit

## How to install (put a desired version if needed)

````https://unpkg.com/crunchit@latest/crunchit.min.js````
````https://cdn.jsdelivr.net/npm/crunchit@latest/crunchit.min.js````

### Regular applications (Plain HTML, CRA, Vue JS, Angular,Svelte, Preact, Semantic UI)

````js
<script 
    src="https://cdn.jsdelivr.net/npm/crunchit@latest/crunchit.min.js"
    onload="init()"
    async
>
</script>

<script>
    function init() {
    try {
        window.letscrunch("YOUR_APP_ID");
    } catch (error) {
        console.error("Failed to load the Magic Pulse package", error);
    }
    }
</script>
    
````
### NextJS applications (in _app.js)

````js
export default function App({ Component, pageProps }) {
  useEffect(() => {
    if (window.letscrunch) {
      try {
        window.letscrunch("YOUR_APP_ID");
      } catch (error) {
        console.error("Failed to load the Magic Pulse package", error);
      }
    }
  }, []);
  return (
    <>
      <Script
        src="https://cdn.jsdelivr.net/npm/crunchit@latest/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````

1. Add this before the end of your body tag

````html
<script src="https://cdn.jsdelivr.net/npm/crunchit@latest/crunchit.min.js"
async
/>
<script
dangerouslySetInnerHTML={{
__html: `
    function init() {
      try {
        window.letscrunch("YOUR_APP_ID");
      } catch (error) {
        console.error("Failed to load the Magic Pulse package", error);
      }
    }
    if (window.addEventListener)
      window.addEventListener("load", init);
    else if (window.attachEvent)
      window.attachEvent("onload", init);
    else window.onload = init;
  `,
  }}
/>
````