Shopalytics Circle

Appearance

Getting Started with SC-Ortto CDN Integration ​

This guide will help you integrate and use the SC-Ortto tracker script from our CDN to track events in your frontend applications. You’ll learn how to include the script from the CDN and how to track events using HTML, Vue, React, and Svelte.

CDN Script URL ​

URL: https://events.shopcircle.co/events/track/frontend

This URL serves a JavaScript file that initializes and configures the SC-Ortto event tracker.

Including the Script in Your Frontend ​

HTML ​

Add the following script tags to your HTML file to include and use the SC-Ortto tracker:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SC-Ortto Integration</title>
</head>
<body>
  <!-- Include the SC-Ortto script from CDN -->
  <script src="https://events.shopcircle.co/events/track/frontend"></script>
  <script>
    // Initialize the SC-Ortto tracker dynamically
    window.sc_ortto.init('admir-test-store.myshopiy.com', 'merchant@example.com', 'My Application');

    // Track an event
    window.sc_ortto.track('signup', 'track', { plan: 'Pro', referrer: 'email-campaign' });
  </script>
</body>
</html>

Vue ​

In your Vue component, you can include the SC-Ortto script and use it in the mounted lifecycle hook:

vue
<template>
  <div>
    <h1>Vue Component</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    // Load SC-Ortto script dynamically
    const script = document.createElement('script');
    script.src = 'https://events.shopcircle.co/events/track/frontend';
    script.onload = () => {
      // Initialize and track events after script loads
      window.sc_ortto.init('admir-test-store.myshopiy.com', 'merchant@example.com', 'My Application');
      window.sc_ortto.track('signup', 'track', { plan: 'Pro', referrer: 'email-campaign' });
    };
    document.body.appendChild(script);
  }
};
</script>

React ​

In your React component, you can include the SC-Ortto script and use it within a useEffect hook:

jsx
import { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    // Load SC-Ortto script dynamically
    const script = document.createElement('script');
    script.src = 'https://events.shopcircle.co/events/track/frontend';
    script.onload = () => {
      // Initialize and track events after script loads
      window.sc_ortto.init('admir-test-store.myshopiy.com','merchant@example.com', 'My Application');
      window.sc_ortto.track('signup', 'track', { plan: 'Pro', referrer: 'email-campaign' });
    };
    document.body.appendChild(script);
    
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>React Component</div>;
};

export default App;

Svelte ​

In your Svelte component, you can include the SC-Ortto script and use it in the onMount lifecycle function:

js
<script>
  import { onMount } from 'svelte';

  onMount(() => {
    // Load SC-Ortto script dynamically
    const script = document.createElement('script');
    script.src = 'https://events.shopcircle.co/events/track/frontend';
    script.onload = () => {
      // Initialize and track events after script loads
      window.sc_ortto.init('merchant@example.com', 'My Application');
      window.sc_ortto.track('signup', 'track', { plan: 'Pro', referrer: 'email-campaign' });
    };
    document.body.appendChild(script);
  });
</script>

<div>
  Svelte Component
</div>

Conclusion ​

Integrating the SC-Ortto tracker via CDN is simple and efficient. By including the CDN script in your HTML or frontend frameworks like Vue, React, and Svelte, you can quickly start tracking events. If you need further assistance or have questions, please reach out to our support team.

Happy tracking!