<!-- Add before closing </body> tag -->
<script src="https://cdn.himalyze.com/tracker.js"></script>
<script>
Himalyze.init({
apiKey: 'your_api_key_here',
endpoint: 'https://api.himalyze.com/track'
});
</script>
Perfect for:
- Static websites
- Landing pages
- Any HTML-based site
// Install package
npm install @himalyze/tracker
// In your App.js or main component
import { useEffect } from 'react';
import Himalyze from '@himalyze/tracker';
function App() {
useEffect(() => {
Himalyze.init({
apiKey: process.env.REACT_APP_HIMALYZE_KEY,
endpoint: 'https://api.himalyze.com/track'
});
}, []);
return <div>Your App</div>;
}
// Track custom events
function SignUpButton() {
const handleClick = () => {
Himalyze.track('signup_clicked', {
location: 'header'
});
};
return <button onClick={handleClick}>Sign Up</button>;
}
Perfect for:
- React applications
- Next.js projects
- Create React App
// Install package
npm install @himalyze/tracker
// In your main.js
import { createApp } from 'vue';
import Himalyze from '@himalyze/tracker';
Himalyze.init({
apiKey: import.meta.env.VITE_HIMALYZE_KEY,
endpoint: 'https://api.himalyze.com/track'
});
const app = createApp(App);
// Make available globally
app.config.globalProperties.$himalyze = Himalyze;
// Use in components
export default {
methods: {
trackSignup() {
this.$himalyze.track('signup_clicked', {
location: 'header'
});
}
}
}
// Or with Composition API
import Himalyze from '@himalyze/tracker';
const trackEvent = () => {
Himalyze.track('button_click');
};
Perfect for:
- Vue 3 applications
- Nuxt.js projects
- Vite + Vue
// Add to your theme's functions.php
function himalyze_tracking_code() {
$api_key = get_option('himalyze_api_key');
if (empty($api_key)) return;
?>
<script src="https://cdn.himalyze.com/tracker.js"></script>
<script>
Himalyze.init({
apiKey: '<?php echo esc_js($api_key); ?>',
endpoint: 'https://api.himalyze.com/track'
});
// Track WooCommerce events
<?php if (class_exists('WooCommerce')): ?>
<?php if (is_product()): ?>
Himalyze.track('product_view', {
product_id: '<?php echo get_the_ID(); ?>',
product_name: '<?php echo get_the_title(); ?>'
});
<?php endif; ?>
<?php endif; ?>
</script>
<?php
}
add_action('wp_footer', 'himalyze_tracking_code');
// Add settings page
function himalyze_settings_page() {
add_options_page(
'Himalyze Settings',
'Himalyze',
'manage_options',
'himalyze',
'himalyze_settings_page_html'
);
}
add_action('admin_menu', 'himalyze_settings_page');
Perfect for:
- WordPress sites
- WooCommerce stores
- WordPress + Elementor
{
"name": "Himalyze",
"settings": [
{
"type": "text",
"id": "himalyze_api_key",
"label": "Himalyze API Key"
}
]
}
Perfect for:
- Shopify stores
- Shopify Plus
- Custom Shopify themes
// Install package
npm install @himalyze/tracker
// In pages/_app.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import Himalyze from '@himalyze/tracker';
function MyApp({ Component, pageProps }) {
const router = useRouter();
useEffect(() => {
// Initialize Himalyze
Himalyze.init({
apiKey: process.env.NEXT_PUBLIC_HIMALYZE_KEY,
endpoint: 'https://api.himalyze.com/track'
});
// Track page views on route change
const handleRouteChange = (url) => {
Himalyze.track('page_view', {
url: window.location.origin + url
});
};
router.events.on('routeChangeComplete', handleRouteChange);
// Track initial page view
handleRouteChange(router.asPath);
return () => {
router.events.off('routeChangeComplete', handleRouteChange);
};
}, [router.events, router.asPath]);
return <Component {...pageProps} />;
}
export default MyApp;
// Track custom events in any component
import Himalyze from '@himalyze/tracker';
export default function PricingPage() {
const handlePlanSelect = (plan) => {
Himalyze.track('plan_selected', {
plan_name: plan,
page: '/pricing'
});
};
return (
<button onClick={() => handlePlanSelect('pro')}>
Select Pro Plan
</button>
);
}
Perfect for:
- Next.js 13+ (App Router)
- Next.js Pages Router
- Server-side rendered apps