feature(public,docs): new public website and docs
This commit is contained in:
51
apps/public/content/articles/.cursorrules
Normal file
51
apps/public/content/articles/.cursorrules
Normal file
@@ -0,0 +1,51 @@
|
||||
- **Language**
|
||||
- Use American English.
|
||||
- Be concise and dont hallucinate.
|
||||
- Dont use emojis.
|
||||
- Dont use hashtags.
|
||||
- Dont use to fancy english. Keep it simple and readable.
|
||||
|
||||
- **Title Guidelines**
|
||||
- Ensure titles are engaging and informative.
|
||||
- Checks:
|
||||
- **Length**: Titles should be concise, ideally under 70 characters.
|
||||
- **Format**: Titles should start with a capital letter.
|
||||
|
||||
- **Introduction**
|
||||
- Write a compelling introduction that summarizes the article.
|
||||
- Checks:
|
||||
- **Length**: Introduction should be at least 50 words.
|
||||
|
||||
- **Content Structure**
|
||||
- Use headings and subheadings to organize content.
|
||||
- Do not use to many headings either. Aiming for 3-5 depending on structure and article length.
|
||||
- Avoid doing to many bullet points with the format `- **Bold text** Lorem ipsum dolor sit amet`. (max 1 per article)
|
||||
- Checks:
|
||||
- **Presence**: Use at least one H2 heading to structure the article.
|
||||
|
||||
- **Paragraph Length**
|
||||
- Keep paragraphs short and readable.
|
||||
- Checks:
|
||||
- **Length**: Paragraphs should not exceed 150 words.
|
||||
|
||||
- **Use of Images**
|
||||
- Incorporate images to enhance the article.
|
||||
- Checks:
|
||||
- **Presence**: Include at least one image to support the content.
|
||||
|
||||
- **SEO Best Practices**
|
||||
- Incorporate keywords naturally throughout the article.
|
||||
- Look in this folder for keywords in other mdx files.
|
||||
- Checks:
|
||||
- **Keyword Density**: Maintain keyword density between 0.5% and 2.5%.
|
||||
|
||||
- **Conclusion**
|
||||
- Summarize the main points and provide a call to action.
|
||||
- Checks:
|
||||
- **Length**: Conclusion should be at least 30 words.
|
||||
|
||||
- **Grammar and Spelling**
|
||||
- Ensure correct grammar and spelling throughout the article.
|
||||
- Checks:
|
||||
- **Spell Check**: Check for spelling errors.
|
||||
- **Grammar Check**: Check for grammatical errors.
|
||||
180
apps/public/content/articles/alternatives-to-mixpanel.mdx
Normal file
180
apps/public/content/articles/alternatives-to-mixpanel.mdx
Normal file
@@ -0,0 +1,180 @@
|
||||
---
|
||||
title: Find an alternative to Mixpanel
|
||||
description: A list of alternatives to Mixpanel, including open source and paid options.
|
||||
date: 2024-11-12
|
||||
team: OpenPanel Team
|
||||
tag: Comparison
|
||||
cover: /content/cover-alternatives.jpg
|
||||
---
|
||||
|
||||
> Want to understand how people use your website? You might think of using Mixpanel first. But it can be complex and hard to learn.
|
||||
|
||||
Think about using something else that's just as good but simpler to use. A tool that makes collecting data easy without the struggle of learning complex features.
|
||||
|
||||
Here's what a better website analytics tool can give you:
|
||||
- **Confidence**: Make choices based on data
|
||||
- **Efficiency**: Work faster with your analytics
|
||||
- **Ease**: Less complex, easier to learn
|
||||
|
||||
## Understanding Website Analytics
|
||||
|
||||
Website analytics helps you collect and understand website data. It shows you how people use your website.
|
||||
|
||||
Since 2016, more companies have started using digital analytics. Companies now want to know how users behave, spot patterns, and make better choices using data.
|
||||
|
||||
Just counting website visits isn't enough anymore. Understanding how users interact with your website can show you important insights and opportunities.
|
||||
|
||||
Good website analytics helps you set goals, track progress, and make your website better. You need tools that are both powerful and easy to use.
|
||||
|
||||
These tools turn raw numbers into useful insights, helping you stay ahead of others.
|
||||
|
||||
## Introduction to Mixpanel
|
||||
|
||||
Mixpanel is a powerful analytics tool that helps marketers, developers, and product managers understand how users behave on their websites and apps.
|
||||
|
||||
Started in 2009, this platform changed how we look at data in real-time.
|
||||
|
||||
Mixpanel helps teams track user engagement and keep users coming back.
|
||||
|
||||
It tracks specific user actions instead of just page views, giving you better insights into what users do.
|
||||
|
||||
Its dashboard shows real-time data clearly, helping teams make better decisions.
|
||||
|
||||
Mixpanel remains a strong player in analytics, helping businesses improve their online presence.
|
||||
|
||||
## Limitations of Mixpanel
|
||||
|
||||
Despite its strengths, Mixpanel has several problems users need to deal with.
|
||||
|
||||
First, Mixpanel's pricing is often too high. The cost of all its features may not make sense for smaller companies or startups, making it hard for growing businesses to use. Simply put, you might not get enough value for what you pay.
|
||||
|
||||
Second, Mixpanel is hard to learn. New users often struggle with its complex interface.
|
||||
|
||||
Third, Mixpanel doesn't work well with some important business tools. This makes it hard to connect all your data in one place.
|
||||
|
||||
Lastly, setting up event tracking is difficult. Users need to carefully set up tracking for each action they want to monitor, which takes time and can lead to mistakes. This means teams often spend too much time setting things up instead of using the data right away.
|
||||
|
||||
## The Need for Simpler Solutions
|
||||
|
||||
In today's busy market, having easy-to-use analytics is key for business success.
|
||||
|
||||
Simple tools help companies collect and understand data without confusion.
|
||||
|
||||
These tools are easy to use and quick to set up, saving time and money. By making data collection and analysis simpler, businesses of any size can use analytics without needing technical experts or long training.
|
||||
|
||||
More importantly, simple solutions help small and medium-sized businesses compete better. Good data insights can change how well a business does. With easy-to-use alternatives to Mixpanel, even businesses with small budgets can grow and make smart choices. Using these simple tools lets businesses focus on what matters—growing and succeeding.
|
||||
|
||||
## Key Features to Look For
|
||||
|
||||
When choosing a Mixpanel alternative, look for these important features:
|
||||
- Easy to set up
|
||||
- Real-time data
|
||||
- Simple to use
|
||||
- Good data charts and graphs
|
||||
|
||||
First, it should be easy to connect with your website.
|
||||
|
||||
The tool should show you data as it happens, helping you make quick decisions.
|
||||
|
||||
It should be easy to use. A tool that's simple to understand saves time and is easier to learn.
|
||||
|
||||
Good data charts are important. Look for tools that show data in ways that make sense to you.
|
||||
|
||||
You should be able to change the tool to fit your needs.
|
||||
|
||||
Lastly, it should be worth the money. The best tool gives you good features at a fair price.
|
||||
|
||||
## Benefits of a Mixpanel Alternative
|
||||
|
||||
Using a simpler alternative to Mixpanel can make your work easier and better.
|
||||
|
||||
First, it's more efficient. Simpler tools are faster to learn and use, helping your team work better. When tools are easier to use, people enjoy using them more.
|
||||
|
||||
Also, you can save money. Many alternatives do similar things as Mixpanel but cost less, letting you spend money on other important things while still getting good analytics.
|
||||
|
||||
Finally, alternatives often let you customize more things to fit your needs. This helps you get better insights and make better plans.
|
||||
|
||||
## Cost-Effectiveness
|
||||
|
||||
> Choosing a simpler Mixpanel alternative can save you money and help you grow.
|
||||
|
||||
The lower prices of many alternatives help you save money. You can use this saved money for other important things while still getting good analytics. These savings add up over time.
|
||||
|
||||
**Key Benefits:**
|
||||
- Lower prices
|
||||
- Fewer extra features you don't need
|
||||
- Less training needed
|
||||
- Faster to start using
|
||||
|
||||
In the end, saving money with alternatives isn't just about the price. By using simpler tools, businesses can balance cost and features better.
|
||||
|
||||
## User-Friendly Interface
|
||||
|
||||
> A simple, easy-to-use design means you can start using the data quickly, without lots of training.
|
||||
|
||||
A big benefit of Mixpanel alternatives is how easy they are to use. This helps everyone use the tool well, no matter their tech skills.
|
||||
|
||||
Simple navigation helps you work faster. Users can find what they need quickly and easily. By focusing on the main features, users don't get confused by too many options.
|
||||
|
||||
**Impact:** When tools are easy to use, teams can do better work without getting frustrated. Clear dashboards show important information simply.
|
||||
|
||||
## Customizable Reports
|
||||
|
||||
> Your data, your way. Turn numbers into insights that help you take action.
|
||||
|
||||
Custom reports let you see data how you want to. This saves time and helps you understand complex data better.
|
||||
|
||||
A good Mixpanel alternative should have:
|
||||
- Easy drag-and-drop tools
|
||||
- Live data updates
|
||||
- Different ways to show charts
|
||||
|
||||
## Data Accuracy
|
||||
|
||||
> Accurate data helps you trust your analytics.
|
||||
|
||||
In website analytics, good data is very important. It affects your decisions and results. With a Mixpanel alternative, getting accurate data is key.
|
||||
|
||||
**Important Points:**
|
||||
- Data you can trust
|
||||
- Regular accuracy checks
|
||||
- Ongoing data testing
|
||||
- Building trust with your team
|
||||
|
||||
## Real-Time Analytics
|
||||
|
||||
> In today's fast-moving online world, seeing data right away helps you make better decisions.
|
||||
|
||||
These tools let you watch how people use your website as it happens. You don't have to wait for reports; you see everything right away.
|
||||
|
||||
**Impact:** Whether you're tracking clicks, page views, or sales, seeing data right away helps you fix problems quickly and find new opportunities.
|
||||
|
||||
## Tips for Transitioning
|
||||
|
||||
> A good switch starts with a clear plan and ends with confident users.
|
||||
|
||||
Start by making a clear plan with goals and timelines. This helps everyone understand what's happening.
|
||||
|
||||
**Best Steps:**
|
||||
1. Get your team involved early
|
||||
2. Train everyone well
|
||||
3. Test with a small project first
|
||||
4. Keep talking with your team
|
||||
5. Find team members who can help others
|
||||
|
||||
## Future Trends in Website Analytics
|
||||
|
||||
> As websites change, analytics tools are changing too, bringing new ways to understand data.
|
||||
|
||||
**Important New Trends:**
|
||||
|
||||
**AI tools**
|
||||
AI helps businesses not just understand what users did before, but guess what they might do next.
|
||||
|
||||
**Privacy first analytics**
|
||||
With new privacy laws like GDPR and CCPA, companies are finding new ways to get insights while protecting user privacy.
|
||||
|
||||
**Quick data updates**
|
||||
Getting data quickly helps businesses make faster, better decisions.
|
||||
|
||||
By using these new tools, businesses can better understand their users and do better online.
|
||||
43
apps/public/content/articles/introduction-to-openpanel.mdx
Normal file
43
apps/public/content/articles/introduction-to-openpanel.mdx
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Introduction to OpenPanel
|
||||
description: OpenPanel is a versatile analytics platform that offers a wide array of features to meet your data analysis needs.
|
||||
tag: Introduction
|
||||
team: OpenPanel Team
|
||||
date: 2024-11-09
|
||||
---
|
||||
|
||||
Welcome to OpenPanel, the open-source analytics platform designed to be a robust alternative to Mixpanel and a great substitute for Google Analytics. In this article, we'll explore why OpenPanel is the ideal choice for businesses looking to leverage powerful analytics while maintaining control over their data.
|
||||
|
||||
## Why Open Source?
|
||||
|
||||
At OpenPanel, we are committed to the principles of open-source software. By making our code publicly available, we invite a community of developers and users to contribute to and enhance our platform. This collaborative approach not only fosters innovation but also ensures transparency in how data is managed and processed—a crucial consideration in today's data-driven world. You can explore our code and contribute on [GitHub](https://github.com/openpanel/openpanel).
|
||||
|
||||
## Why Choose OpenPanel?
|
||||
|
||||
Our journey began with a vision to create an open-source alternative to Mixpanel, a tool we admired for its product analytics capabilities. However, as we developed OpenPanel, we realized the potential to offer more comprehensive features that Mixpanel lacked, particularly in the realm of web analytics. While Mixpanel excels in product analytics, it doesn't fully address web analytics needs. OpenPanel bridges this gap by integrating both web and product analytics, providing a holistic view of user behavior.
|
||||
|
||||
## What Can You Do with OpenPanel?
|
||||
|
||||
OpenPanel is a versatile analytics platform that offers a wide array of features to meet your data analysis needs:
|
||||
|
||||
- **Web Analytics**: Gain insights similar to tools like Plausible, Fathom, and Simple Analytics.
|
||||
- **Product Analytics**: Analyze product usage and user interactions, akin to Mixpanel.
|
||||
- **User Retention**: Track and enhance user retention rates.
|
||||
- **Funnels**: Visualize user journeys and conversion paths.
|
||||
- **Events**: Monitor specific user actions and interactions.
|
||||
- **Profiles**: Create detailed user profiles to better understand your audience.
|
||||
- **Real-Time View**: Display real-time data on a big monitor in your office for dynamic insights.
|
||||
- **Export API**: Seamlessly export your data for further analysis.
|
||||
- **Chart API**: Integrate custom visualizations into your dashboards.
|
||||
|
||||
## Commitment to Privacy
|
||||
|
||||
Privacy and data protection are at the core of OpenPanel's philosophy. We believe that your data is your property, and you should have full control over it. Our tracking script is fully open-source and complies with GDPR and CCPA regulations. Unlike many analytics tools, we do not use cookies to track users; instead, we utilize fingerprinting techniques similar to Plausible, ensuring user privacy without sacrificing functionality.
|
||||
|
||||
## Your Data is Safe with Us
|
||||
|
||||
At OpenPanel, your data security is our priority. We never sell your data to third parties. To sustain our service, we charge a small fee, but our pricing remains competitive with other analytics solutions. If you prefer, you can also self-host OpenPanel, maintaining complete control over your data. You can delete or export your data at any time, ensuring no vendor lock-in.
|
||||
|
||||
## Listening to Feedback
|
||||
|
||||
Our users are our greatest asset, and their feedback shapes the evolution of OpenPanel. We actively seek input from our community to refine existing features and introduce new ones that support business growth. Your suggestions drive our innovation, helping us deliver a product that meets your needs.
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
title: Top 7 Open-Source Web Analytics Tools
|
||||
description: In an era where data drives decisions, what are your best options for web analytics?
|
||||
date: 2024-11-10
|
||||
cover: /content/cover-best-web-analytics.jpg
|
||||
tag: Comparison
|
||||
team: OpenPanel Team
|
||||
---
|
||||
|
||||
In an era where data drives decisions, what are your best options for web analytics?
|
||||
|
||||
Consider the power and potential of open-source alternatives to proprietary solutions. Discovering these tools can significantly elevate your insights while maintaining flexibility and control.
|
||||
|
||||
## 1. Understanding Web Analytics Challenges
|
||||
|
||||
Navigating the landscape of web analytics presents numerous challenges that require careful deliberation and strategic management.
|
||||
|
||||
Firstly, creating a comprehensive data strategy is a daunting task that requires a clear understanding of key performance indicators (KPIs) and user behavior metrics. This complexity is further compounded by the necessity of integrating data from various sources, creating a multifaceted view of user interactions.
|
||||
|
||||
Moreover, data accuracy is a perpetual concern in web analytics. Ensuring that collected data is both accurate and relevant requires robust validation methods, alongside consistency checks to prevent discrepancies that could distort analytics insights.
|
||||
|
||||
Finally, the challenge of real-time data analysis looms large for many organizations. To truly harness the power of their analytics, enterprises must adopt solutions that provide immediate, actionable insights. This necessitates not only advanced technical infrastructure but also a skilled team capable of interpreting and reacting to data in real-time, driving agile decision-making.
|
||||
|
||||
## 2. Plausible - A Privacy-Focused Solution
|
||||
|
||||
Plausible emerges as a robust alternative, offering a vital blend of simplicity, transparency, and privacy in web analytics. This solution stands out because it respects user privacy while delivering meaningful insights. Plausible is designed to align seamlessly with the modern emphasis on data protection.
|
||||
|
||||
Plausible’s distinguishing feature lies in its commitment to not collecting personal data. Consequently, this principled stance minimizes the risk of privacy breaches. Users can enjoy peace of mind knowing their information is handled with care.
|
||||
|
||||
Moreover, Plausible’s interface is intuitively crafted to ensure ease of use while maintaining comprehensive functionality. It’s particularly suitable for users who desire straightforward yet powerful analytics solutions.
|
||||
|
||||
Serving as a beacon for ethical web analytics, Plausible avoids employing cookies and complies with privacy laws such as GDPR, CCPA, and PECR. This implementation instills trust and reliability among businesses and their users.
|
||||
|
||||
Plausible’s affordability and clear, concise data presentation make it an attractive option for startups and enterprises alike, interested in extracting maximum value from their web analytics. Furthermore, it remains open-source, welcoming community contributions that continually enhance its features.
|
||||
|
||||
In essence, Plausible excels by marrying simplicity with ethical data practices. The focus on privacy does not compromise the depth of insights provided. This makes Plausible an inspiring choice for forward-thinking businesses.
|
||||
|
||||
## 3. Matomo - Comprehensive Data Control
|
||||
|
||||
Matomo epitomizes robust data control.
|
||||
|
||||
Formerly known as Piwik, Matomo provides exhaustive data ownership. This open-source web analytics platform offers a powerful alternative to proprietary tools, giving you the ultimate autonomy over your user data. Consequently, you can bypass the usual data governance concerns associated with third-party services.
|
||||
|
||||
Data privacy is Matomo's utmost priority.
|
||||
|
||||
Its infrastructure guarantees that your sensitive data is stored on your servers, ensuring compliance with rigorous privacy standards. This autonomous setup fosters trust, providing stakeholders with the reassurance of uncompromised data security.
|
||||
|
||||
Beyond data control, Matomo supports a suite of advanced analytics features. These capabilities include customizable dashboards, granular user segmentation, and detailed visitor profiles. As a result, businesses can extract deep insights while adhering to their unique data governance policies.
|
||||
|
||||
Matomo’s future-proof design and open-source nature position it as an enduring solution in web analytics. Through an engaged community and continuous updates, Matomo remains adaptive to the evolving digital landscape, ensuring its users stay ahead of their analytical needs.
|
||||
|
||||
## 4. Fathom - User-Friendly with Great Privacy
|
||||
|
||||
Fathom is distinguished by its exceptional ease of use and robust privacy features. It’s designed to simplify analytics for everyone, from novices to experts.
|
||||
|
||||
Fathom guarantees that user data remains confidential.
|
||||
|
||||
Users can attain actionable insights without compromising privacy, paving the way for a balance between data-driven decision-making and stringent privacy standards. Emphasizing simplicity, Fathom provides intuitive interfaces and dashboards that enable swift comprehension and application.
|
||||
|
||||
Beyond ease of use, Fathom’s minimalist approach significantly reduces the learning curve, making it accessible even to those new to web analytics. In doing so, it empowers businesses to harness critical insights rapidly, ensuring that privacy concerns never hinder analytical capabilities. Moreover, Fathom's commitment to “zero” tracking ensures peace of mind while leveraging insightful data.
|
||||
|
||||
## 5. Umami - Simple and Effective Analytics
|
||||
|
||||
Umami is an open-source web analytics tool that stands out for its simplicity, usability, and potent capabilities. This platform appeals to those who prioritize straightforward yet comprehensive analysis of their web traffic.
|
||||
|
||||
With Umami, you enjoy a clutter-free interface.
|
||||
|
||||
Contrary to more complex systems, Umami minimizes the learning curve.
|
||||
|
||||
Umami assesses data efficiently, offering insights in an instantly understandable format.
|
||||
|
||||
The platform fosters data-driven decision-making without unnecessary complexity, presenting neatly organized statistics and metrics. Furthermore, it prides itself on user privacy and does not collect IP addresses.
|
||||
|
||||
Ultimately, Umami is testament to how simplicity and effectiveness can coexist, securing its place as a distinguished choice in web analytics. This platform allows you to focus on actionable insights without wading through extraneous data.
|
||||
|
||||
## 6. PostHog - Powerful and Self-Hosted Insights
|
||||
|
||||
PostHog truly shines as a robust, open-source solution for insightful web analytics.
|
||||
|
||||
Offering extensive, self-hosted analytics, it provides businesses with unrivaled control and privacy. This setup gives firms the leverage to harness detailed data about user behavior while maintaining stringent data security protocols. You can track all sorts of interactions, from clicks to conversions, with exquisite precision.
|
||||
|
||||
Notably, PostHog thrives on contributing towards community-driven development. It continually evolves with feedback from its users, ensuring that the tool stays up-to-date with the latest web analytics trends and needs. Therefore, you are not just adopting a tool; you are joining a vibrant and proactive community.
|
||||
|
||||
Embrace the power of PostHog for a data-driven future. Its functionality goes beyond basic metrics, offering intricate insights and real-time features. This gives you an edge, enabling strategic decision-making based on comprehensive and reliable data garnered in real-time.
|
||||
|
||||
## 7. Ackee - Minimalistic and Self-Hosted
|
||||
|
||||
When you envision simplicity, efficiency, and security in web analytics, Ackee stands out brilliantly.
|
||||
|
||||
Founded in 2016, Ackee exemplifies a minimalistic approach with no compromise on essential functionalities. Designed to be self-hosted, it ensures that sensitive data resides exclusively on your servers, giving you complete control.
|
||||
|
||||
Even more impressive is how Ackee’s straightforward user interface makes it exceedingly easy to integrate and use. With support for various platforms, you can accurately track visitor patterns and engagement across multiple digital touchpoints without any hassle.
|
||||
|
||||
Its lightweight nature means Ackee won’t burden your system resources, allowing for both efficiency and speed. Installation is simple, typically completed within 3 minutes, offering extensive customization options and highly intuitive dashboards.
|
||||
|
||||
Ackee’s compelling advantage lies in its focus on privacy and data security. It provides web analytics without compromising the trust of your users.
|
||||
|
||||
## OpenPanel - In our opinion the best option
|
||||
|
||||
When searching for a comprehensive, open-source web analytics tool, OpenPanel stands out remarkably, offering an unparalleled suite of features.
|
||||
|
||||
Its blend of ease-of-use and robust functionality is simply exceptional.
|
||||
|
||||
OpenPanel not only delivers detailed analytics but also integrates seamlessly with our existing tech stack. This ensures a consistent user experience, fostering both simplicity and productivity.
|
||||
|
||||
The software's intuitive analytics allow for deep insights into user behavior, making it a perfect solution for dynamic and data-driven organizations. Its high degree of customization ensures it adapts to our specific requirements, embodying the perfect balance of flexibility and reliability. Thus, OpenPanel positions itself as the premier choice for innovators seeking an open-source alternative in web analytics.
|
||||
103
apps/public/content/articles/vs-mixpanel.mdx
Normal file
103
apps/public/content/articles/vs-mixpanel.mdx
Normal file
@@ -0,0 +1,103 @@
|
||||
---
|
||||
title: Mixpanel vs OpenPanel
|
||||
description: A comparison between Mixpanel and OpenPanel
|
||||
date: 2024-11-13
|
||||
tag: Comparison
|
||||
team: OpenPanel Team
|
||||
cover: /content/cover-mixpanel.jpg
|
||||
---
|
||||
import { Figure } from "@/components/figure";
|
||||
|
||||
OpenPanel is based on the same principles as Mixpanel, but with a few key differences. We'll go through some of the features and see how they compare.
|
||||
|
||||
## Web analytics
|
||||
|
||||
Mixpanel is a great product analytics tool but in our minds its lacking in this area. Web analytics should always be easy to get going and we think Mixpanel has to much focus on product analytics.
|
||||
|
||||
In OpenPanel you do not need to do anything to get your web analytics up and running. Just add the tracking snippet to your website or app and you're up and running.
|
||||
|
||||
<Figure
|
||||
src="/content/screenshot-web-analytics.png"
|
||||
alt="OpenPanel web analytics dashboard showing pageviews, sessions and other key metrics"
|
||||
caption="OpenPanel's web analytics dashboard provides key metrics at a glance"
|
||||
/>
|
||||
|
||||
## Product analytics
|
||||
|
||||
Mixpanel's strength is in product analytics and it's hard to beat (to be honest). Nevertheless we aim to have the same great features in OpenPanel.
|
||||
|
||||
Probably the most used feature in Mixpanel is their report tool, where you can create all kinds of charts and see how different things are doing. We have tried to make a similar experiance where you can pick and choose different metrics and dimensions to create your own custom reports.
|
||||
|
||||
Some of the features we have added are:
|
||||
|
||||
- **Funnels**
|
||||
- **Retention**
|
||||
- **Line charts**
|
||||
- **Bar charts**
|
||||
- **Histogram charts**
|
||||
- **Area charts**
|
||||
- **Pie charts**
|
||||
- **Map charts**
|
||||
- **Events**
|
||||
- **Profiles**
|
||||
|
||||
<Figure
|
||||
src="/content/screenshot-report-funnel.png"
|
||||
alt="OpenPanel report tool showing a funnel"
|
||||
caption="OpenPanel's report tool provides a wide range of charts and metrics"
|
||||
/>
|
||||
|
||||
## Cookies vs Cookieless
|
||||
|
||||
Mixpanel is a cookie-based tool, which means that it relies on cookies to track users. This provides advantages like:
|
||||
- More accurate user identification across sessions
|
||||
- Better cross-domain tracking
|
||||
- Easier integration with existing cookie-based systems
|
||||
|
||||
However, it also comes with challenges:
|
||||
- Requires cookie consent banners in many jurisdictions
|
||||
- Can be blocked by ad blockers and privacy-focused browsers
|
||||
- May not work with upcoming cookie restrictions
|
||||
|
||||
OpenPanel uses a cookieless approach, relying instead on privacy-preserving techniques like fingerprinting and session-based tracking. This offers benefits such as:
|
||||
- No cookie consent banners required
|
||||
- Works even when cookies are blocked
|
||||
- Future-proof against upcoming cookie restrictions
|
||||
|
||||
> Its up to you to decide what's best for your users and your business.
|
||||
|
||||
## Realtime
|
||||
|
||||
Both Mixpanel and OpenPanel have real-time analytics. Its just a matter of seconds before you can see what's happening in your product or website.
|
||||
|
||||
But we have added a new feature in OpenPanel which we call `Realtime`. It's similar to Google Analytics' real-time view since we love looking at big screens with live data.
|
||||
|
||||
<Figure
|
||||
src="/content/screenshot-realtime.png"
|
||||
alt="OpenPanel real-time analytics dashboard showing active users and other key metrics"
|
||||
caption="See where all your users are at the moment in OpenPanel's realtime view"
|
||||
/>
|
||||
|
||||
## Notifications
|
||||
|
||||
In OpenPanel you can create notifications for different events. This is a great way to stay on top of things and get notified when something is happening.
|
||||
|
||||
You can define advanced conditions when and what to notify you about. We have several integrations with other tools so you can easily connect your notifications to other tools you use.
|
||||
|
||||
As of now, we don't believe Mixpanel has this feature.
|
||||
|
||||
## Similarities
|
||||
|
||||
### Profiles
|
||||
|
||||
Both Mixpanel and OpenPanel allow you to see profiles of your users. This is a great way to understand your users and see how they are doing.
|
||||
|
||||
### Events
|
||||
|
||||
You get new events in realtime in both Mixpanel and OpenPanel, you can search and filter on any property. Mixpanel might be a bit faster but it's not a big difference.
|
||||
|
||||
## Conclusion
|
||||
|
||||
Mixpanel is a great product analytics tool but in our minds its lacking in this area. Web analytics should always be easy to get going and we think Mixpanel has to much focus on product analytics.
|
||||
|
||||
**OpenPanel is a great alternative to Mixpanel** if you want to get started with analytics quickly and easily.
|
||||
177
apps/public/content/docs/api/export.mdx
Normal file
177
apps/public/content/docs/api/export.mdx
Normal file
@@ -0,0 +1,177 @@
|
||||
---
|
||||
title: Export
|
||||
description: The Export API allows you to retrieve event data and chart data from your OpenPanel projects.
|
||||
---
|
||||
|
||||
## Authentication
|
||||
|
||||
To authenticate with the Export API, you need to use your `clientId` and `clientSecret`. Make sure your client has `read` or `root` mode. The default client does not have access to the Export API.
|
||||
|
||||
Include the following headers with your requests:
|
||||
- `openpanel-client-id`: Your OpenPanel client ID
|
||||
- `openpanel-client-secret`: Your OpenPanel client secret
|
||||
|
||||
Example:
|
||||
|
||||
```bash
|
||||
curl 'https://api.openpanel.dev/export/events' \
|
||||
-H 'openpanel-client-id: YOUR_CLIENT_ID' \
|
||||
-H 'openpanel-client-secret: YOUR_CLIENT_SECRET'
|
||||
```
|
||||
|
||||
## Events
|
||||
|
||||
Get events from a specific project within a date range.
|
||||
|
||||
Endpoint: `GET /export/events`
|
||||
|
||||
Parameters:
|
||||
- project_id (required): The ID of the project
|
||||
- event (optional): Filter by event name(s). Can be a single event or an array of events.
|
||||
- start (optional): Start date (format: YYYY-MM-DD)
|
||||
- end (optional): End date (format: YYYY-MM-DD)
|
||||
- page (optional, default: 1): Page number for pagination
|
||||
- limit (optional, default: 50, max: 50): Number of events per page
|
||||
- includes (optional): Additional fields to include in the response
|
||||
|
||||
Example:
|
||||
|
||||
```bash
|
||||
curl 'https://api.openpanel.dev/export/events?project_id=abc&event=screen_view&start=2024-04-15&end=2024-04-18' \
|
||||
-H 'openpanel-client-id: YOUR_CLIENT_ID' \
|
||||
-H 'openpanel-client-secret: YOUR_CLIENT_SECRET'
|
||||
```
|
||||
|
||||
### Query Parameters
|
||||
|
||||
| Parameter | Type | Description | Example |
|
||||
|-----------|------|-------------|---------|
|
||||
| projectId | string | The ID of the project to fetch events from | `abc123` |
|
||||
| event | string or string[] | Event name(s) to filter | `screen_view` or `["screen_view","button_click"]` |
|
||||
| start | string | Start date for the event range (ISO format) | `2024-04-15` |
|
||||
| end | string | End date for the event range (ISO format) | `2024-04-18` |
|
||||
| page | number | Page number for pagination (default: 1) | `2` |
|
||||
| limit | number | Number of events per page (default: 50, max: 50) | `25` |
|
||||
| includes | string or string[] | Additional fields to include in the response | `profile` or `["profile","meta"]` |
|
||||
|
||||
### Example Request
|
||||
|
||||
```bash
|
||||
curl 'https://api.openpanel.dev/export/events?project_id=abc123&event=screen_view&start=2024-04-15&end=2024-04-18&page=1&limit=50&includes=profile,meta' \
|
||||
-H 'openpanel-client-id: YOUR_CLIENT_ID' \
|
||||
-H 'openpanel-client-secret: YOUR_CLIENT_SECRET'
|
||||
```
|
||||
|
||||
### Response
|
||||
|
||||
```json
|
||||
{
|
||||
"meta": {
|
||||
"count": number,
|
||||
"totalCount": number,
|
||||
"pages": number,
|
||||
"current": number
|
||||
},
|
||||
"data": Array<Event>
|
||||
}
|
||||
```
|
||||
|
||||
## Charts
|
||||
|
||||
Retrieve chart data for a specific project.
|
||||
|
||||
### Endpoint
|
||||
|
||||
```
|
||||
GET /export/charts
|
||||
```
|
||||
|
||||
### Query Parameters
|
||||
|
||||
| Parameter | Type | Description | Example |
|
||||
|-----------|------|-------------|---------|
|
||||
| projectId | string | The ID of the project to fetch chart data from | `abc123` |
|
||||
| events | string[] | Array of event names to include in the chart | `["sign_up","purchase"]` |
|
||||
| breakdowns | object[] | Array of breakdown configurations | `[{"name":"country"}]` |
|
||||
| interval | string | Time interval for data points | `day` |
|
||||
| range | string | Predefined date range | `last_7_days` |
|
||||
| previous | boolean | Include data from the previous period | `true` |
|
||||
| startDate | string | Custom start date (ISO format) | `2024-04-01` |
|
||||
| endDate | string | Custom end date (ISO format) | `2024-04-30` |
|
||||
| chartType | string | Type of chart to generate | `linear` |
|
||||
| metric | string | Metric to use for calculations | `sum` |
|
||||
| limit | number | Limit the number of results | `10` |
|
||||
| offset | number | Offset for pagination | `0` |
|
||||
|
||||
### Example Request
|
||||
|
||||
```bash
|
||||
curl 'https://api.openpanel.dev/export/charts?projectId=abc123&events=["sign_up","purchase"]&interval=day&range=last_30_days&chartType=linear&metric=sum' \
|
||||
-H 'openpanel-client-id: YOUR_CLIENT_ID' \
|
||||
-H 'openpanel-client-secret: YOUR_CLIENT_SECRET'
|
||||
```
|
||||
|
||||
### Response
|
||||
|
||||
The response will include chart data with series, metrics, and optional previous period comparisons based on the input parameters.
|
||||
|
||||
## Funnel
|
||||
|
||||
Retrieve funnel data for a specific project.
|
||||
|
||||
### Endpoint
|
||||
|
||||
```
|
||||
GET /export/funnel
|
||||
```
|
||||
|
||||
### Query Parameters
|
||||
|
||||
| Parameter | Type | Description | Example |
|
||||
|-----------|------|-------------|---------|
|
||||
| projectId | string | The ID of the project to fetch funnel data from | `abc123` |
|
||||
| events | object[] | Array of event configurations for the funnel steps | `[{"name":"sign_up","filters":[]}]` |
|
||||
| range | string | Predefined date range | `last_30_days` |
|
||||
| startDate | string | Custom start date (ISO format) | `2024-04-01` |
|
||||
| endDate | string | Custom end date (ISO format) | `2024-04-30` |
|
||||
|
||||
### Example Request
|
||||
|
||||
```bash
|
||||
curl 'https://api.openpanel.dev/export/funnel?projectId=abc123&events=[{"name":"sign_up"},{"name":"purchase"}]&range=last_30_days' \
|
||||
-H 'openpanel-client-id: YOUR_CLIENT_ID' \
|
||||
-H 'openpanel-client-secret: YOUR_CLIENT_SECRET'
|
||||
```
|
||||
|
||||
### Response
|
||||
|
||||
The response will include funnel data with total sessions and step-by-step breakdown of the funnel progression.
|
||||
|
||||
```json
|
||||
{
|
||||
"totalSessions": number,
|
||||
"steps": [
|
||||
{
|
||||
"event": {
|
||||
"name": string,
|
||||
"displayName": string
|
||||
},
|
||||
"count": number,
|
||||
"percent": number,
|
||||
"dropoffCount": number,
|
||||
"dropoffPercent": number,
|
||||
"previousCount": number
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
- All date parameters should be in ISO format (YYYY-MM-DD).
|
||||
- The `range` parameter accepts values like `today`, `yesterday`, `last_7_days`, `last_30_days`, `this_month`, `last_month`, `this_year`, `last_year`, `all_time`.
|
||||
- The `interval` parameter accepts values like `minute`, `hour`, `day`, `month`.
|
||||
- The `chartType` parameter can be `linear` or other supported chart types.
|
||||
- The `metric` parameter can be `sum`, `average`, `min`, or `max`.
|
||||
|
||||
Remember to replace `YOUR_CLIENT_ID` and `YOUR_CLIENT_SECRET` with your actual OpenPanel API credentials.
|
||||
4
apps/public/content/docs/api/meta.json
Normal file
4
apps/public/content/docs/api/meta.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"title": "API",
|
||||
"pages": ["track", "export"]
|
||||
}
|
||||
145
apps/public/content/docs/api/track.mdx
Normal file
145
apps/public/content/docs/api/track.mdx
Normal file
@@ -0,0 +1,145 @@
|
||||
---
|
||||
title: Track
|
||||
description: This guide demonstrates how to interact with the OpenPanel API using cURL. These examples provide a low-level understanding of the API endpoints and can be useful for testing or for integrations where a full SDK isn't available.
|
||||
---
|
||||
|
||||
## Good to know
|
||||
|
||||
- If you want to track **geo location** you'll need to pass the `ip` property as a header `x-client-ip`
|
||||
- If you want to track **device information** you'll need to pass the `user-agent` property as a header `user-agent`
|
||||
|
||||
## Authentication
|
||||
|
||||
All requests to the OpenPanel API require authentication. You'll need to include your `clientId` and `clientSecret` in the headers of each request.
|
||||
|
||||
```bash
|
||||
-H "openpanel-client-id: YOUR_CLIENT_ID" \
|
||||
-H "openpanel-client-secret: YOUR_CLIENT_SECRET"
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Base URL
|
||||
|
||||
All API requests should be made to:
|
||||
|
||||
```
|
||||
https://api.openpanel.dev
|
||||
```
|
||||
|
||||
### Tracking Events
|
||||
|
||||
To track an event:
|
||||
|
||||
```bash
|
||||
curl -X POST https://api.openpanel.dev/track \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "openpanel-client-id: YOUR_CLIENT_ID" \
|
||||
-H "openpanel-client-secret: YOUR_CLIENT_SECRET" \
|
||||
-d '{
|
||||
"type": "track",
|
||||
"payload": {
|
||||
"name": "my_event",
|
||||
"properties": {
|
||||
"foo": "bar"
|
||||
}
|
||||
}
|
||||
}'
|
||||
```
|
||||
|
||||
### Identifying Users
|
||||
|
||||
To identify a user:
|
||||
|
||||
```bash
|
||||
curl -X POST https://api.openpanel.dev/track \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "openpanel-client-id: YOUR_CLIENT_ID" \
|
||||
-H "openpanel-client-secret: YOUR_CLIENT_SECRET" \
|
||||
-d '{
|
||||
"type": "identify",
|
||||
"payload": {
|
||||
"profileId": "123",
|
||||
"firstName": "Joe",
|
||||
"lastName": "Doe",
|
||||
"email": "joe@doe.com",
|
||||
"properties": {
|
||||
"tier": "premium"
|
||||
}
|
||||
}
|
||||
}'
|
||||
```
|
||||
|
||||
### Creating Aliases
|
||||
To create an alias for a user:
|
||||
|
||||
```bash
|
||||
curl -X POST https://api.openpanel.dev/track \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "openpanel-client-id: YOUR_CLIENT_ID" \
|
||||
-H "openpanel-client-secret: YOUR_CLIENT_SECRET" \
|
||||
-d '{
|
||||
"type": "alias",
|
||||
"payload": {
|
||||
"profileId": "1",
|
||||
"alias": "a1"
|
||||
}
|
||||
}'
|
||||
```
|
||||
|
||||
### Incrementing Properties
|
||||
To increment a numeric property:
|
||||
|
||||
```bash
|
||||
curl -X POST https://api.openpanel.dev/track \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "openpanel-client-id: YOUR_CLIENT_ID" \
|
||||
-H "openpanel-client-secret: YOUR_CLIENT_SECRET" \
|
||||
-d '{
|
||||
"type": "increment",
|
||||
"payload": {
|
||||
"profileId": "1",
|
||||
"property": "visits",
|
||||
"value": 1
|
||||
}
|
||||
}'
|
||||
```
|
||||
|
||||
### Decrementing Properties
|
||||
To decrement a numeric property:
|
||||
|
||||
```bash
|
||||
curl -X POST https://api.openpanel.dev/track \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "openpanel-client-id: YOUR_CLIENT_ID" \
|
||||
-H "openpanel-client-secret: YOUR_CLIENT_SECRET" \
|
||||
-d '{
|
||||
"type": "decrement",
|
||||
"payload": {
|
||||
"profileId": "1",
|
||||
"property": "visits",
|
||||
"value": 1
|
||||
}
|
||||
}'
|
||||
```
|
||||
|
||||
### Error Handling
|
||||
The API uses standard HTTP response codes to indicate the success or failure of requests. In case of an error, the response body will contain more information about the error.
|
||||
Example error response:
|
||||
|
||||
```json
|
||||
{
|
||||
"error": "Invalid client credentials",
|
||||
"status": 401
|
||||
}
|
||||
```
|
||||
|
||||
### Rate Limiting
|
||||
|
||||
The API implements rate limiting to prevent abuse. If you exceed the rate limit, you'll receive a 429 (Too Many Requests) response. The response will include headers indicating your rate limit status.
|
||||
|
||||
Best Practices
|
||||
1. Always use HTTPS to ensure secure communication.
|
||||
2. Store your clientId and clientSecret securely and never expose them in client-side code.
|
||||
3. Implement proper error handling in your applications.
|
||||
4. Respect rate limits and implement exponential backoff for retries.
|
||||
59
apps/public/content/docs/index.mdx
Normal file
59
apps/public/content/docs/index.mdx
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: The OpenPanel SDKs provide a set of core methods that allow you to track events, identify users, and more. Here's an overview of the key methods available in the SDKs.
|
||||
---
|
||||
|
||||
<Callout>
|
||||
While all OpenPanel SDKs share a common set of core methods, some may have
|
||||
syntax variations or additional methods specific to their environment. This
|
||||
documentation provides an overview of the base methods and available SDKs.
|
||||
</Callout>
|
||||
|
||||
## Core Methods
|
||||
|
||||
### Set global properties
|
||||
|
||||
Sets global properties that will be included with every subsequent event.
|
||||
|
||||
### Track
|
||||
|
||||
Tracks a custom event with the given name and optional properties.
|
||||
|
||||
#### Tips
|
||||
|
||||
You can identify the user directly with this method.
|
||||
|
||||
```js filename="Example shown in JavaScript"
|
||||
track('your_event_name', {
|
||||
foo: 'bar',
|
||||
baz: 'qux',
|
||||
// reserved property name
|
||||
__identify: {
|
||||
profileId: 'your_user_id', // required
|
||||
email: 'your_user_email',
|
||||
firstName: 'your_user_name',
|
||||
lastName: 'your_user_name',
|
||||
avatar: 'your_user_avatar',
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Identify
|
||||
|
||||
Associates the current user with a unique identifier and optional traits.
|
||||
|
||||
### Alias
|
||||
|
||||
Creates an alias for a user identifier.
|
||||
|
||||
### Increment
|
||||
|
||||
Increments a numeric property for a user.
|
||||
|
||||
### Decrement
|
||||
|
||||
Decrements a numeric property for a user.
|
||||
|
||||
### Clear
|
||||
|
||||
Clears the current user identifier and ends the session.
|
||||
40
apps/public/content/docs/migration/beta-v1.mdx
Normal file
40
apps/public/content/docs/migration/beta-v1.mdx
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: Beta to V1
|
||||
description: We are happy to announce the release of `v1` of the Openpanel SDK. This release includes a lot of improvements and changes to the SDK. This guide will help you migrate from the `beta` version to the `v1` version.
|
||||
---
|
||||
|
||||
## General
|
||||
|
||||
The `Openpanel` class is now called `OpenPanel`!
|
||||
|
||||
## Options
|
||||
|
||||
- Renamed: `api` to `apiUrl`
|
||||
- Added: `disabled`
|
||||
- Added: `filter`
|
||||
|
||||
## Methods
|
||||
- Renamed: `event` method is now called `track`
|
||||
- Renamed: `setProfile` and `setProfileId` is now called `identify` (and combined)
|
||||
- Changed: `increment('app_opened', 5)` is now `increment({ name: 'app_opened', value: 5, profileId: '123' })`. So profile ID is now required.
|
||||
- Changed: `decrement('app_opened', 5)` is now `decrement({ name: 'app_opened', value: 5, profileId: '123' })`. So profile ID is now required.
|
||||
- Improved: `screenView` method has 2 arguments now. This change is more aligned with `@openpanel/react-native`.
|
||||
```ts
|
||||
screenView(properties?: TrackProperties): void;
|
||||
screenView(path: string, properties?: TrackProperties): void;
|
||||
|
||||
// Example
|
||||
op.screenView('/home', { title: 'Home' }); // path will be "/home"
|
||||
op.screenView({ title: 'Home' }); // path will be what ever window.location.pathname is
|
||||
```
|
||||
|
||||
## Script tag
|
||||
|
||||
- New: `https://openpanel.dev/op1.js` should be used instead of `op.js` (note the filename)
|
||||
- Renamed: Tracking with attributes have changed. Use `data-track="my_event"` instead of `data-event="my_event"`
|
||||
|
||||
## @openpanel/nextjs
|
||||
|
||||
- Renamed: `OpenpanelProvider` to `OpenPanelComponent`
|
||||
- Removed: All exported methods (trackEvent etc). Use the `useOpenPanel` hook instead since these are client tracking only
|
||||
- Moved: `createNextRouteHandler` is moved to `@openpanel/nextjs/server`
|
||||
5
apps/public/content/docs/sdks/astro.mdx
Normal file
5
apps/public/content/docs/sdks/astro.mdx
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Astro
|
||||
---
|
||||
|
||||
You can use [script tag](/docs/sdks/script) or [Web SDK](/docs/sdks/web) to track events in Astro.
|
||||
80
apps/public/content/docs/sdks/express.mdx
Normal file
80
apps/public/content/docs/sdks/express.mdx
Normal file
@@ -0,0 +1,80 @@
|
||||
---
|
||||
title: Express
|
||||
description: The Express middleware is a basic wrapper around Javascript SDK. It provides a simple way to add the SDK to your Express application.
|
||||
---
|
||||
|
||||
import Link from 'next/link';
|
||||
import { DeviceIdWarning } from '@/components/device-id-warning';
|
||||
import { PersonalDataWarning } from '@/components/personal-data-warning';
|
||||
|
||||
import CommonSdkConfig from '@/components/common-sdk-config.mdx';
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
pnpm install @openpanel/express
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The default export of `@openpanel/express` is a function that returns an Express middleware. It will also append the Openpanel SDK to the `req` object.
|
||||
|
||||
You can access it via `req.op`.
|
||||
|
||||
```ts
|
||||
import express from 'express';
|
||||
|
||||
import createOpenpanelMiddleware from '@openpanel/express';
|
||||
|
||||
const app = express();
|
||||
|
||||
app.use(
|
||||
createOpenpanelMiddleware({
|
||||
clientId: 'xxx',
|
||||
clientSecret: 'xxx',
|
||||
// trackRequest(url) {
|
||||
// return url.includes('/v1')
|
||||
// },
|
||||
// getProfileId(req) {
|
||||
// return req.user.id
|
||||
// }
|
||||
})
|
||||
);
|
||||
|
||||
app.get('/sign-up', (req, res) => {
|
||||
// track sign up events
|
||||
req.op.track('sign-up', {
|
||||
email: req.body.email,
|
||||
});
|
||||
res.send('Hello World');
|
||||
});
|
||||
|
||||
app.listen(3000, () => {
|
||||
console.log('Server is running on http://localhost:3000');
|
||||
});
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
<CommonSdkConfig />
|
||||
|
||||
#### Express options
|
||||
|
||||
- `trackRequest` - A function that returns `true` if the request should be tracked.
|
||||
- `getProfileId` - A function that returns the profile ID of the user making the request.
|
||||
|
||||
## Typescript
|
||||
|
||||
If `req.op` is not typed you can extend the `Request` interface.
|
||||
|
||||
```ts
|
||||
import { OpenPanel } from '@openpanel/express';
|
||||
|
||||
declare global {
|
||||
namespace Express {
|
||||
export interface Request {
|
||||
op: OpenPanel;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
140
apps/public/content/docs/sdks/javascript.mdx
Normal file
140
apps/public/content/docs/sdks/javascript.mdx
Normal file
@@ -0,0 +1,140 @@
|
||||
---
|
||||
title: Javascript (Node / Generic)
|
||||
description: The OpenPanel Web SDK allows you to track user behavior on your website using a simple script tag. This guide provides instructions for installing and using the Web SDK in your project.
|
||||
---
|
||||
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
import { PersonalDataWarning } from '@/components/personal-data-warning';
|
||||
import CommonSdkConfig from '@/components/common-sdk-config.mdx';
|
||||
import WebSdkConfig from '@/components/web-sdk-config.mdx';
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
### Step 1: Install
|
||||
|
||||
```bash
|
||||
npm install @openpanel/sdk
|
||||
```
|
||||
|
||||
### Step 2: Initialize
|
||||
|
||||
```js filename="op.ts"
|
||||
import { OpenPanel } from '@openpanel/sdk';
|
||||
|
||||
const op = new OpenPanel({
|
||||
clientId: 'YOUR_CLIENT_ID',
|
||||
clientSecret: 'YOUR_CLIENT_SECRET',
|
||||
});
|
||||
```
|
||||
|
||||
#### Options
|
||||
|
||||
<CommonSdkConfig />
|
||||
|
||||
### Step 3: Usage
|
||||
|
||||
```js filename="main.ts"
|
||||
import { op } from './op.js';
|
||||
|
||||
op.track('my_event', { foo: 'bar' });
|
||||
```
|
||||
</Steps>
|
||||
|
||||
## Usage
|
||||
|
||||
### Tracking Events
|
||||
|
||||
You can track events with two different methods: by calling the `op.track( directly or by adding `data-track` attributes to your HTML elements.
|
||||
|
||||
```ts filename="index.ts"
|
||||
import { op } from './op.ts';
|
||||
|
||||
op.track('my_event', { foo: 'bar' });
|
||||
```
|
||||
|
||||
### Identifying Users
|
||||
|
||||
To identify a user, call the `op.identify( method with a unique identifier.
|
||||
|
||||
```js filename="index.js"
|
||||
import { op } from './op.ts';
|
||||
|
||||
op.identify({
|
||||
profileId: '123', // Required
|
||||
firstName: 'Joe',
|
||||
lastName: 'Doe',
|
||||
email: 'joe@doe.com',
|
||||
properties: {
|
||||
tier: 'premium',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Setting Global Properties
|
||||
|
||||
To set properties that will be sent with every event:
|
||||
|
||||
```js filename="index.js"
|
||||
import { op } from './op.ts'
|
||||
|
||||
op.setGlobalProperties({
|
||||
app_version: '1.0.2',
|
||||
environment: 'production',
|
||||
});
|
||||
```
|
||||
|
||||
### Creating Aliases
|
||||
|
||||
To create an alias for a user:
|
||||
|
||||
```js filename="index.js"
|
||||
import { op } from './op.ts'
|
||||
|
||||
op.alias({
|
||||
alias: 'a1',
|
||||
profileId: '1'
|
||||
});
|
||||
```
|
||||
|
||||
### Incrementing Properties
|
||||
|
||||
To increment a numeric property on a user profile.
|
||||
|
||||
- `value` is the amount to increment the property by. If not provided, the property will be incremented by 1.
|
||||
|
||||
```js filename="index.js"
|
||||
import { op } from './op.ts'
|
||||
|
||||
op.increment({
|
||||
profileId: '1',
|
||||
property: 'visits',
|
||||
value: 1 // optional
|
||||
});
|
||||
```
|
||||
|
||||
### Decrementing Properties
|
||||
|
||||
To decrement a numeric property on a user profile.
|
||||
|
||||
- `value` is the amount to decrement the property by. If not provided, the property will be decremented by 1.
|
||||
|
||||
```js filename="index.js"
|
||||
import { op } from './op.ts'
|
||||
|
||||
op.decrement({
|
||||
profileId: '1',
|
||||
property: 'visits',
|
||||
value: 1 // optional
|
||||
});
|
||||
```
|
||||
|
||||
### Clearing User Data
|
||||
|
||||
To clear the current user's data:
|
||||
|
||||
```js filename="index.js"
|
||||
import { op } from './op.ts'
|
||||
|
||||
op.clear()
|
||||
```
|
||||
5
apps/public/content/docs/sdks/meta.json
Normal file
5
apps/public/content/docs/sdks/meta.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "SDKs",
|
||||
"pages": ["script", "web", "javascript", "node", "nextjs", "..."],
|
||||
"defaultOpen": true
|
||||
}
|
||||
303
apps/public/content/docs/sdks/nextjs.mdx
Normal file
303
apps/public/content/docs/sdks/nextjs.mdx
Normal file
@@ -0,0 +1,303 @@
|
||||
---
|
||||
title: Next.js
|
||||
---
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
|
||||
import { DeviceIdWarning } from '@/components/device-id-warning';
|
||||
import { PersonalDataWarning } from '@/components/personal-data-warning';
|
||||
import CommonSdkConfig from '@/components/common-sdk-config.mdx';
|
||||
import WebSdkConfig from '@/components/web-sdk-config.mdx';
|
||||
|
||||
## Good to know
|
||||
|
||||
Keep in mind that all tracking here happens on the client!
|
||||
|
||||
Read more about server side tracking in the [Server Side Tracking](#track-server-events) section.
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
### Install dependencies
|
||||
|
||||
```bash
|
||||
pnpm install @openpanel/nextjs
|
||||
```
|
||||
|
||||
### Initialize
|
||||
|
||||
Add `OpenPanelComponent` to your root layout component.
|
||||
|
||||
```tsx
|
||||
import { OpenPanelComponent } from '@openpanel/nextjs';
|
||||
|
||||
export default RootLayout({ children }) {
|
||||
return (
|
||||
<>
|
||||
<OpenPanelComponent
|
||||
clientId="your-client-id"
|
||||
trackScreenViews={true}
|
||||
// trackAttributes={true}
|
||||
// trackOutgoingLinks={true}
|
||||
// If you have a user id, you can pass it here to identify the user
|
||||
// profileId={'123'}
|
||||
/>
|
||||
{children}
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### Options
|
||||
|
||||
<CommonSdkConfig />
|
||||
<WebSdkConfig />
|
||||
|
||||
##### NextJS options
|
||||
|
||||
- `profileId` - If you have a user id, you can pass it here to identify the user
|
||||
- `cdnUrl` - The url to the OpenPanel SDK (default: `https://openpanel.dev/op1.js`)
|
||||
- `filter` - This is a function that will be called before tracking an event. If it returns false the event will not be tracked. [Read more](#filter)
|
||||
- `globalProperties` - This is an object of properties that will be sent with every event.
|
||||
|
||||
##### `filter`
|
||||
|
||||
This options needs to be a stringified function and cannot access any variables outside of the function.
|
||||
|
||||
```tsx
|
||||
<OpenPanelComponent
|
||||
clientId="your-client-id"
|
||||
filter={`
|
||||
function filter(event) {
|
||||
return event.name !== 'my_event';
|
||||
}
|
||||
`}
|
||||
/>
|
||||
```
|
||||
|
||||
To take advantage of typescript you can do the following. _Note `toString`_
|
||||
```tsx /.toString();/
|
||||
import { type OpenPanelOptions } from '@openpanel/nextjs';
|
||||
|
||||
const opFilter = ((event: TrackHandlerPayload) => {
|
||||
return event.type === 'track' && event.payload.name === 'my_event';
|
||||
}).toString();
|
||||
|
||||
<OpenPanelComponent
|
||||
clientId="your-client-id"
|
||||
filter={opFilter}
|
||||
/>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
## Usage
|
||||
|
||||
### Client components
|
||||
|
||||
For client components you can just use the `useOpenPanel` hook.
|
||||
|
||||
```tsx
|
||||
import { useOpenPanel } from '@openpanel/nextjs';
|
||||
|
||||
function YourComponent() {
|
||||
const op = useOpenPanel();
|
||||
|
||||
return <button type="button" onClick={() => op.track('my_event', { foo: 'bar' })}>Trigger event</button>
|
||||
}
|
||||
```
|
||||
|
||||
### Server components
|
||||
|
||||
Since you can't use hooks in server components, you need to create an instance of the SDK. This is exported from `@openpanel/nextjs`.
|
||||
|
||||
<Callout>Remember, your client secret is exposed here so do not use this on client side.</Callout>
|
||||
|
||||
```tsx filename="utils/op.ts"
|
||||
import { OpenPanel } from '@openpanel/nextjs';
|
||||
|
||||
export const op = new OpenPanel({
|
||||
clientId: 'your-client-id',
|
||||
clientSecret: 'your-client-secret',
|
||||
});
|
||||
|
||||
// Now you can use `op` to track events
|
||||
op.track('my_event', { foo: 'bar' });
|
||||
```
|
||||
|
||||
Refer to the [Javascript SDK](/docs/sdks/javascript#usage) for usage instructions.
|
||||
|
||||
### Tracking Events
|
||||
|
||||
You can track events with two different methods: by calling the `op.track( directly or by adding `data-track` attributes to your HTML elements.
|
||||
|
||||
```ts filename="index.ts"
|
||||
useOpenPanel().track('my_event', { foo: 'bar' });
|
||||
```
|
||||
|
||||
### Identifying Users
|
||||
|
||||
To identify a user, call the `op.identify( method with a unique identifier.
|
||||
|
||||
```js filename="index.js"
|
||||
useOpenPanel().identify({
|
||||
profileId: '123', // Required
|
||||
firstName: 'Joe',
|
||||
lastName: 'Doe',
|
||||
email: 'joe@doe.com',
|
||||
properties: {
|
||||
tier: 'premium',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
#### For server components
|
||||
|
||||
For server components you can use the `IdentifyComponent` component which is exported from `@openpanel/nextjs`.
|
||||
|
||||
> This component is great if you have the user data available on the server side.
|
||||
|
||||
```tsx filename="app/nested/layout.tsx"
|
||||
import { IdentifyComponent } from '@openpanel/nextjs';
|
||||
|
||||
export default function Layout({ children }) {
|
||||
const user = await getCurrentUser()
|
||||
|
||||
return (
|
||||
<>
|
||||
<IdentifyComponent
|
||||
profileId={user.id}
|
||||
firstName={user.firstName}
|
||||
lastName={user.lastName}
|
||||
email={user.email}
|
||||
properties={{
|
||||
tier: 'premium',
|
||||
}}
|
||||
/>
|
||||
{children}
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Setting Global Properties
|
||||
|
||||
To set properties that will be sent with every event:
|
||||
|
||||
```js filename="index.js"
|
||||
useOpenPanel().setGlobalProperties({
|
||||
app_version: '1.0.2',
|
||||
environment: 'production',
|
||||
});
|
||||
```
|
||||
|
||||
### Creating Aliases
|
||||
|
||||
To create an alias for a user:
|
||||
|
||||
```js filename="index.js"
|
||||
useOpenPanel().alias({
|
||||
alias: 'a1',
|
||||
profileId: '1'
|
||||
});
|
||||
```
|
||||
|
||||
### Incrementing Properties
|
||||
|
||||
To increment a numeric property on a user profile.
|
||||
|
||||
- `value` is the amount to increment the property by. If not provided, the property will be incremented by 1.
|
||||
|
||||
```js filename="index.js"
|
||||
useOpenPanel().increment({
|
||||
profileId: '1',
|
||||
property: 'visits',
|
||||
value: 1 // optional
|
||||
});
|
||||
```
|
||||
|
||||
### Decrementing Properties
|
||||
|
||||
To decrement a numeric property on a user profile.
|
||||
|
||||
- `value` is the amount to decrement the property by. If not provided, the property will be decremented by 1.
|
||||
|
||||
```js filename="index.js"
|
||||
useOpenPanel().decrement({
|
||||
profileId: '1',
|
||||
property: 'visits',
|
||||
value: 1 // optional
|
||||
});
|
||||
```
|
||||
|
||||
### Clearing User Data
|
||||
|
||||
To clear the current user's data:
|
||||
|
||||
```js filename="index.js"
|
||||
useOpenPanel().clear()
|
||||
```
|
||||
|
||||
## Server side
|
||||
|
||||
If you want to track server-side events, you should create an instance of our Javascript SDK. It's exported from `@openpanel/nextjs`
|
||||
|
||||
<Callout>
|
||||
When using server events it's important that you use a secret to authenticate the request. This is to prevent unauthorized requests since we cannot use cors headers.
|
||||
|
||||
You can use the same clientId but you should pass the associated client secret to the SDK.
|
||||
|
||||
</Callout>
|
||||
|
||||
```typescript
|
||||
import { OpenpanelSdk } from '@openpanel/nextjs';
|
||||
|
||||
const opServer = new OpenpanelSdk({
|
||||
clientId: '{YOUR_CLIENT_ID}',
|
||||
clientSecret: '{YOUR_CLIENT_SECRET}',
|
||||
});
|
||||
|
||||
opServer.event('my_server_event', { ok: '✅' });
|
||||
|
||||
// Pass `profileId` to track events for a specific user
|
||||
opServer.event('my_server_event', { profileId: '123', ok: '✅' });
|
||||
```
|
||||
|
||||
### Serverless & Vercel
|
||||
|
||||
If you log events in a serverless environment like Vercel, you can use `waitUntil` to ensure the event is logged before the function is done.
|
||||
|
||||
Otherwise your function might close before the event is logged. Read more about it [here](https://vercel.com/docs/functions/functions-api-reference#waituntil).
|
||||
|
||||
```typescript
|
||||
import { waitUntil } from '@vercel/functions';
|
||||
import { opServer } from 'path/to/your-sdk-instance';
|
||||
|
||||
export function GET() {
|
||||
// Returns a response immediately while keeping the function alive
|
||||
waitUntil(opServer.event('my_server_event', { foo: 'bar' }));
|
||||
return new Response(`You're event has been logged!`);
|
||||
}
|
||||
```
|
||||
|
||||
### Proxy events
|
||||
|
||||
With `createNextRouteHandler` you can proxy your events through your server, this will ensure all events are tracked since there is a lot of adblockers that block requests to third party domains.
|
||||
|
||||
```typescript filename="/app/api/op/route.ts"
|
||||
import { createNextRouteHandler } from '@openpanel/nextjs/server';
|
||||
|
||||
export const POST = createNextRouteHandler();
|
||||
```
|
||||
|
||||
Remember to change the `apiUrl` in the `OpenPanelComponent` to your own server.
|
||||
|
||||
```tsx {2}
|
||||
<OpenPanelComponent
|
||||
apiUrl="/api/op"
|
||||
clientId="your-client-id"
|
||||
trackScreenViews={true}
|
||||
/>
|
||||
```
|
||||
115
apps/public/content/docs/sdks/react-native.mdx
Normal file
115
apps/public/content/docs/sdks/react-native.mdx
Normal file
@@ -0,0 +1,115 @@
|
||||
---
|
||||
title: React Native
|
||||
---
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
import { DeviceIdWarning } from '@/components/device-id-warning';
|
||||
import { PersonalDataWarning } from '@/components/personal-data-warning';
|
||||
|
||||
import CommonSdkConfig from '@/components/common-sdk-config.mdx';
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
### Install dependencies
|
||||
|
||||
We're dependent on `expo-application` for `buildNumber`, `versionNumber` (and `referrer` on android) and `expo-constants` to get the `user-agent`.
|
||||
|
||||
```bash
|
||||
npm install @openpanel/react-native
|
||||
npx expo install expo-application expo-constants
|
||||
```
|
||||
|
||||
### Initialize
|
||||
|
||||
On native we use a clientSecret to authenticate the app.
|
||||
|
||||
```typescript
|
||||
const op = new Openpanel({
|
||||
clientId: '{YOUR_CLIENT_ID}',
|
||||
clientSecret: '{YOUR_CLIENT_SECRET}',
|
||||
});
|
||||
```
|
||||
|
||||
#### Options
|
||||
|
||||
<CommonSdkConfig />
|
||||
</Steps>
|
||||
|
||||
## Usage
|
||||
|
||||
### Track event
|
||||
|
||||
```typescript
|
||||
op.track('my_event', { foo: 'bar' });
|
||||
```
|
||||
|
||||
### Navigation / Screen views
|
||||
|
||||
<Tabs items={['expo-router', 'react-navigation (simple)']}>
|
||||
<Tab value="expo-router">
|
||||
```typescript
|
||||
import { usePathname, useSegments } from 'expo-router';
|
||||
|
||||
const op = new Openpanel({ /* ... */ })
|
||||
|
||||
function RootLayout() {
|
||||
// ...
|
||||
const pathname = usePathname()
|
||||
// Segments is optional but can be nice to have if you
|
||||
// want to group routes together
|
||||
// pathname = /posts/123
|
||||
// segements = ['posts', '[id]']
|
||||
const segments = useSegments()
|
||||
|
||||
useEffect(() => {
|
||||
// Simple
|
||||
op.screenView(pathname)
|
||||
|
||||
// With extra data
|
||||
op.screenView(pathname, {
|
||||
// segments is optional but nice to have
|
||||
segments: segments.join('/'),
|
||||
// other optional data you want to send with the screen view
|
||||
})
|
||||
}, [pathname,segments])
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab value="react-navigation (simple)">
|
||||
```tsx
|
||||
import { createNavigationContainerRef } from '@react-navigation/native'
|
||||
import { Openpanel } from '@openpanel/react-native'
|
||||
|
||||
const op = new Openpanel({ /* ... */ })
|
||||
const navigationRef = createNavigationContainerRef()
|
||||
|
||||
export function NavigationRoot() {
|
||||
const handleNavigationStateChange = () => {
|
||||
const current = navigationRef.getCurrentRoute()
|
||||
if (current) {
|
||||
op.screenView(current.name, {
|
||||
params: current.params,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<NavigationContainer
|
||||
ref={navigationRef}
|
||||
onReady={handleNavigationStateChange}
|
||||
onStateChange={handleNavigationStateChange}
|
||||
>
|
||||
<Stack.Navigator />
|
||||
</NavigationContainer>
|
||||
)
|
||||
}
|
||||
```
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
For more information on how to use the SDK, check out the [Javascript SDK](/docs/sdks/javascript#usage).
|
||||
5
apps/public/content/docs/sdks/react.mdx
Normal file
5
apps/public/content/docs/sdks/react.mdx
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: React
|
||||
---
|
||||
|
||||
Use [script tag](/docs/sdks/script) or [Web SDK](/docs/sdks/web) for now. We'll add a dedicated react sdk soon.
|
||||
5
apps/public/content/docs/sdks/remix.mdx
Normal file
5
apps/public/content/docs/sdks/remix.mdx
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Remix
|
||||
---
|
||||
|
||||
Use [script tag](/docs/sdks/script) or [Web SDK](/docs/sdks/web) for now. We'll add a dedicated remix sdk soon.
|
||||
211
apps/public/content/docs/sdks/script.mdx
Normal file
211
apps/public/content/docs/sdks/script.mdx
Normal file
@@ -0,0 +1,211 @@
|
||||
---
|
||||
title: Script Tag
|
||||
description: The OpenPanel Web SDK allows you to track user behavior on your website using a simple script tag. This guide provides instructions for installing and using the Web SDK in your project.
|
||||
---
|
||||
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
import { PersonalDataWarning } from '@/components/personal-data-warning';
|
||||
import CommonSdkConfig from '@/components/common-sdk-config.mdx';
|
||||
import WebSdkConfig from '@/components/web-sdk-config.mdx';
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Just insert this snippet and replace `YOUR_CLIENT_ID` with your client id.
|
||||
|
||||
```html filename="index.html" /clientId: 'YOUR_CLIENT_ID'/
|
||||
<script>
|
||||
window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
|
||||
window.op('init', {
|
||||
clientId: 'YOUR_CLIENT_ID',
|
||||
trackScreenViews: true,
|
||||
trackOutgoingLinks: true,
|
||||
trackAttributes: true,
|
||||
});
|
||||
</script>
|
||||
<script src="https://openpanel.dev/op1.js" defer async></script>
|
||||
```
|
||||
|
||||
#### Options
|
||||
|
||||
<CommonSdkConfig />
|
||||
<WebSdkConfig />
|
||||
|
||||
## Usage
|
||||
|
||||
### Tracking Events
|
||||
|
||||
You can track events with two different methods: by calling the `window.op('track')` directly or by adding `data-track` attributes to your HTML elements.
|
||||
|
||||
```html filename="index.html"
|
||||
<button type="button" onclick="window.op('track', 'my_event', { foo: 'bar' })">
|
||||
Track event
|
||||
</button>
|
||||
```
|
||||
|
||||
```html filename="index.html"
|
||||
<button type="button" data-track="my_event" data-foo="bar">Track event</button>
|
||||
```
|
||||
|
||||
### Identifying Users
|
||||
|
||||
To identify a user, call the `window.op('identify')` method with a unique identifier.
|
||||
|
||||
```js filename="main.js"
|
||||
window.op('identify', {
|
||||
profileId: '123', // Required
|
||||
firstName: 'Joe',
|
||||
lastName: 'Doe',
|
||||
email: 'joe@doe.com',
|
||||
properties: {
|
||||
tier: 'premium',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Setting Global Properties
|
||||
|
||||
To set properties that will be sent with every event:
|
||||
|
||||
```js filename="main.js"
|
||||
window.op('setGlobalProperties', {
|
||||
app_version: '1.0.2',
|
||||
environment: 'production',
|
||||
});
|
||||
```
|
||||
|
||||
### Creating Aliases
|
||||
|
||||
To create an alias for a user:
|
||||
|
||||
```js filename="main.js"
|
||||
window.op('alias', {
|
||||
alias: 'a1',
|
||||
profileId: '1'
|
||||
});
|
||||
```
|
||||
|
||||
### Incrementing Properties
|
||||
|
||||
To increment a numeric property on a user profile.
|
||||
|
||||
- `value` is the amount to increment the property by. If not provided, the property will be incremented by 1.
|
||||
|
||||
```js filename="main.js"
|
||||
window.op('increment', {
|
||||
profileId: '1',
|
||||
property: 'visits',
|
||||
value: 1 // optional
|
||||
});
|
||||
```
|
||||
|
||||
### Decrementing Properties
|
||||
|
||||
To decrement a numeric property on a user profile.
|
||||
|
||||
- `value` is the amount to decrement the property by. If not provided, the property will be decremented by 1.
|
||||
|
||||
```js filename="main.js"
|
||||
window.op('decrement', {
|
||||
profileId: '1',
|
||||
property: 'visits',
|
||||
value: 1 // optional
|
||||
});
|
||||
```
|
||||
|
||||
### Clearing User Data
|
||||
|
||||
To clear the current user's data:
|
||||
|
||||
```js filename="main.js"
|
||||
window.op('clear');
|
||||
```
|
||||
|
||||
## Advanced Usage
|
||||
|
||||
### Filtering events
|
||||
|
||||
You can filter out events by adding a `filter` property to the `init` method.
|
||||
|
||||
Below is an example of how to disable tracking for users who have a `disable_tracking` item in their local storage.
|
||||
|
||||
```js filename="main.js"
|
||||
window.op('init', {
|
||||
clientId: 'YOUR_CLIENT_ID',
|
||||
trackScreenViews: true,
|
||||
trackOutgoingLinks: true,
|
||||
trackAttributes: true,
|
||||
filter: () => localStorage.getItem('disable_tracking') === undefined,
|
||||
});
|
||||
```
|
||||
|
||||
### Using the Web SDK with NPM
|
||||
|
||||
<Steps>
|
||||
#### Step 1: Install the SDK
|
||||
|
||||
```bash
|
||||
npm install @openpanel/web
|
||||
```
|
||||
|
||||
#### Step 2: Initialize the SDK
|
||||
|
||||
```js filename="op.js"
|
||||
import { OpenPanel } from '@openpanel/web';
|
||||
|
||||
const op = new OpenPanel({
|
||||
clientId: 'YOUR_CLIENT_ID',
|
||||
trackScreenViews: true,
|
||||
trackOutgoingLinks: true,
|
||||
trackAttributes: true,
|
||||
});
|
||||
```
|
||||
|
||||
#### Step 3: Use the SDK
|
||||
|
||||
```js filename="main.js"
|
||||
import { op } from './op.js';
|
||||
|
||||
op.track('my_event', { foo: 'bar' });
|
||||
```
|
||||
</Steps>
|
||||
|
||||
### Typescript
|
||||
|
||||
Getting ts errors when using the SDK? You can add a custom type definition file to your project.
|
||||
|
||||
#### Simple
|
||||
|
||||
Just paste this code in any of your `.d.ts` files.
|
||||
|
||||
```ts filename="op.d.ts"
|
||||
declare global {
|
||||
interface Window {
|
||||
op: {
|
||||
q?: string[][];
|
||||
(...args: [
|
||||
'init' | 'track' | 'identify' | 'setGlobalProperties' | 'alias' | 'increment' | 'decrement' | 'clear',
|
||||
...any[]
|
||||
]): void;
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Strict typing (from sdk)
|
||||
|
||||
<Steps>
|
||||
##### Step 1: Install the SDK
|
||||
|
||||
```bash
|
||||
npm install @openpanel/web
|
||||
```
|
||||
|
||||
##### Step 2: Create a type definition file
|
||||
|
||||
Create a `op.d.ts`file and paste the following code:
|
||||
|
||||
```ts filename="op.d.ts"
|
||||
/// <reference types="@openpanel/web" />
|
||||
```
|
||||
</Steps>
|
||||
5
apps/public/content/docs/sdks/vue.mdx
Normal file
5
apps/public/content/docs/sdks/vue.mdx
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Vue
|
||||
---
|
||||
|
||||
Use [script tag](/docs/sdks/script) or [Web SDK](/docs/sdks/web) for now. We'll add a dedicated react sdk soon.
|
||||
49
apps/public/content/docs/sdks/web.mdx
Normal file
49
apps/public/content/docs/sdks/web.mdx
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: Javascript (Web)
|
||||
description: The OpenPanel Web SDK allows you to track user behavior on your website using a simple script tag. This guide provides instructions for installing and using the Web SDK in your project.
|
||||
---
|
||||
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
import { PersonalDataWarning } from '@/components/personal-data-warning';
|
||||
import CommonSdkConfig from '@/components/common-sdk-config.mdx';
|
||||
import WebSdkConfig from '@/components/web-sdk-config.mdx';
|
||||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
### Step 1: Install
|
||||
|
||||
```bash
|
||||
npm install @openpanel/web
|
||||
```
|
||||
|
||||
### Step 2: Initialize
|
||||
|
||||
```js filename="op.ts"
|
||||
import { OpenPanel } from '@openpanel/web';
|
||||
|
||||
const op = new OpenPanel({
|
||||
clientId: 'YOUR_CLIENT_ID',
|
||||
trackScreenViews: true,
|
||||
trackOutgoingLinks: true,
|
||||
trackAttributes: true,
|
||||
});
|
||||
```
|
||||
|
||||
#### Options
|
||||
|
||||
<CommonSdkConfig />
|
||||
<WebSdkConfig />
|
||||
|
||||
### Step 3: Usage
|
||||
|
||||
```js filename="main.ts"
|
||||
import { op } from './op.js';
|
||||
|
||||
op.track('my_event', { foo: 'bar' });
|
||||
```
|
||||
</Steps>
|
||||
|
||||
## Usage
|
||||
|
||||
Refer to the [Javascript SDK](/docs/sdks/javascript#usage) for usage instructions.
|
||||
142
apps/public/content/docs/self-hosting/self-hosting.mdx
Normal file
142
apps/public/content/docs/self-hosting/self-hosting.mdx
Normal file
@@ -0,0 +1,142 @@
|
||||
---
|
||||
title: Self-hosting
|
||||
description: This is a simple guide how to get started with OpenPanel on your own VPS.
|
||||
---
|
||||
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
|
||||
|
||||
|
||||
<Callout>OpenPanel is not stable yet. If you still want to self-host you can go ahead. Bear in mind that new changes might give a little headache to keep up with.</Callout>
|
||||
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- VPS of any kind (only tested on Ubuntu 24.04)
|
||||
- 🙋♂️ This should work on any system if you have pre-installed docker, node and pnpm
|
||||
- [Clerk.com](https://clerk.com) account (they have a free tier)
|
||||
|
||||
### Quickstart
|
||||
|
||||
```bash
|
||||
git clone https://github.com/Openpanel-dev/openpanel && cd openpanel/self-hosting && ./setup
|
||||
# After setup is complete run `./start` to start OpenPanel
|
||||
```
|
||||
|
||||
<Steps>
|
||||
|
||||
### Clone
|
||||
|
||||
Clone the repository to your VPS
|
||||
|
||||
```bash
|
||||
git clone https://github.com/Openpanel-dev/openpanel.git
|
||||
```
|
||||
|
||||
### Run the setup script
|
||||
|
||||
The setup script will do 3 things
|
||||
|
||||
1. Install node (if you accept)
|
||||
2. Install docker (if you accept)
|
||||
3. Execute a node script that will ask some questions about your setup
|
||||
4. After this is done you'll need to point a webhook inside Clerk (https://your-domain.com/api/webhook/clerk)
|
||||
|
||||
> Setup takes 1-2 minutes depending on your VPS
|
||||
|
||||
```bash
|
||||
cd openpanel/self-hosting
|
||||
./setup
|
||||
```
|
||||
|
||||
⚠️ If the `./setup` script fails to run, you can do it manually.
|
||||
|
||||
1. Install docker
|
||||
2. Install node
|
||||
3. Install pnpm
|
||||
4. Run the `npx jiti ./quiz.ts` script inside the self-hosting folder
|
||||
|
||||
### Start 🚀
|
||||
|
||||
Run the `./start` script located inside the self-hosting folder
|
||||
|
||||
```bash
|
||||
./start
|
||||
```
|
||||
</Steps>
|
||||
|
||||
## Clerk.com
|
||||
|
||||
<Callout>
|
||||
Some might wonder why we use Clerk.com for authentication. The main reason for this is that Clerk have great support for iOS and Android apps. We're in the process of building an native app and we want to have a seamless experience for our users.
|
||||
|
||||
**next-auth** is great, but lacks good support for mobile apps.
|
||||
</Callout>
|
||||
|
||||
You'll need to create an account at [Clerk.com](https://clerk.com) and create a new project. You'll need the 3 keys that Clerk provides you with.
|
||||
|
||||
- **Publishable key** `pk_live_xxx`
|
||||
- **Secret key** `sk_live_xxx`
|
||||
- **Signing secret** `"whsec_xxx"`
|
||||
|
||||
### Webhooks
|
||||
|
||||
You'll also need to add a webhook to your domain. We listen on some events from Clerk to keep our database in sync.
|
||||
|
||||
#### URL
|
||||
|
||||
- **Path**: `/api/webhook/clerk`
|
||||
- **Example**: `https://your-domain.com/api/webhook/clerk`
|
||||
|
||||
#### Events we listen to
|
||||
|
||||
- `organizationMembership.created`
|
||||
- `user.created`
|
||||
- `organizationMembership.deleted`
|
||||
- `user.updated`
|
||||
- `user.deleted`
|
||||
|
||||
## Good to know
|
||||
|
||||
### Always use correct api url
|
||||
|
||||
When self-hosting you'll need to provide your api url when initializing the SDK.
|
||||
|
||||
The path should be `/api` and the domain should be your domain.
|
||||
|
||||
```html filename="index.html" {4}
|
||||
<script>
|
||||
window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
|
||||
window.op('init', {
|
||||
apiUrl: 'https://your-domain.com/api',
|
||||
clientId: 'YOUR_CLIENT_ID',
|
||||
trackScreenViews: true,
|
||||
trackOutgoingLinks: true,
|
||||
trackAttributes: true,
|
||||
});
|
||||
</script>
|
||||
<script src="https://openpanel.dev/op1.js" defer async></script>
|
||||
```
|
||||
|
||||
```js filename="op.ts" {4}
|
||||
import { OpenPanel } from '@openpanel/sdk';
|
||||
|
||||
const op = new OpenPanel({
|
||||
apiUrl: 'https://your-domain.com/api',
|
||||
clientId: 'YOUR_CLIENT_ID',
|
||||
trackScreenViews: true,
|
||||
trackOutgoingLinks: true,
|
||||
trackAttributes: true,
|
||||
});
|
||||
```
|
||||
|
||||
### Managed Redis
|
||||
|
||||
If you use a managed Redis service, you may need to set the `notify-keyspace-events` manually.
|
||||
|
||||
Without this setting we wont be able to listen for expired keys which we use for caluclating currently active vistors.
|
||||
|
||||
> You will see a warning in the logs if this needs to be set manually.
|
||||
66
apps/public/content/pages/about.mdx
Normal file
66
apps/public/content/pages/about.mdx
Normal file
@@ -0,0 +1,66 @@
|
||||
---
|
||||
title: About
|
||||
description: Learn about who we are and why we started this company. We're on a mission to help businesses work better with their data.
|
||||
---
|
||||
|
||||
|
||||
## Introduction
|
||||
|
||||
Hey there!
|
||||
|
||||
My name is [Carl-Gerhard Lindesvärd](https://x.com/CarlLindesvard). I'm the founder of OpenPanel. These days, knowing how your users use your product is super important.
|
||||
|
||||
I've worked with different analytics tools for over 5 years, and I've seen it all - the good, the bad, and the ugly.
|
||||
|
||||
I've mostly used Mixpanel along with tools like Google Analytics. Here's why I decided to start OpenPanel.
|
||||
|
||||
## Why
|
||||
|
||||
### Product analytics
|
||||
|
||||
Mixpanel is a solid analytics tool - it's easy to create reports and has tons of features.
|
||||
|
||||
But I was only using a small part of it, mainly the reports. I wanted a simple way to see my custom events. Sure, Mixpanel lets you make nice reports with different charts like:
|
||||
|
||||
- Line charts
|
||||
- Bar charts
|
||||
- Pie charts
|
||||
- Funnels
|
||||
- Retention
|
||||
- ...and more
|
||||
|
||||
Being able to track what each user does was great too. But that was pretty much all I needed.
|
||||
|
||||
The problem? I had to pay $300/month for this. Their pricing makes no sense, especially since I only used a tiny bit of what they offer.
|
||||
|
||||
### Web analytics
|
||||
|
||||
Mixpanel does web analytics too, but not in a way that works for me. I just wanted a simple dashboard to quickly see how my website is doing. That's why I ended up needing a separate tool just for web analytics.
|
||||
|
||||
## The solution
|
||||
|
||||
That's why I built OpenPanel. It's a simple analytics tool that I actually use myself. It combines both product and web analytics:
|
||||
|
||||
- You get a clear picture of your website's performance and can dig deeper when needed
|
||||
- You can build reports that show your data in ways that make sense to you
|
||||
- You can see what your users are doing, both individually and as a group
|
||||
- Unlike Mixpanel, you can check your stats from your phone since our dashboard works great on mobile
|
||||
|
||||
## OpenPanel is a great alternative to Mixpanel
|
||||
|
||||
Now you know a bit about me and why I think OpenPanel is a solid alternative to Mixpanel. Got questions? Want to know more? Feel free to [contact me](/contact).
|
||||
|
||||
You can read more about why we think OpenPanel is a [good alternative to Mixpanel](/articles/vs-mixpanel).
|
||||
|
||||
## Company
|
||||
|
||||
OpenPanel (OpenPanel AB) is a company based in Stockholm, Sweden.
|
||||
|
||||
### Address
|
||||
|
||||
<pre className="p-0">
|
||||
OpenPanel AB
|
||||
Sankt Eriksgatan 100
|
||||
113 31 Stockholm
|
||||
Sweden
|
||||
</pre>
|
||||
16
apps/public/content/pages/contact.mdx
Normal file
16
apps/public/content/pages/contact.mdx
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
title: Contact
|
||||
description: Get in touch with the founder of OpenPanel - a simple and affordable alternative to Mixpanel combining product and web analytics.
|
||||
---
|
||||
|
||||
## Mediums to contact me:
|
||||
|
||||
- [Email](mailto:hello@openpanel.dev)
|
||||
- [X (@OpenPanelDev)](https://x.com/OpenPanelDev)
|
||||
- [X (@CarlLindesvard)](https://x.com/CarlLindesvard)
|
||||
- [Discord](https://discord.gg/openpanel)
|
||||
- [Github](https://github.com/Openpanel-dev/openpanel/)
|
||||
|
||||
## Issues or feature requests
|
||||
|
||||
If you have any issues or feature requests, please let me know by [opening an issue on Github](https://github.com/Openpanel-dev/openpanel/issues) or join our [Discord](https://discord.gg/openpanel).
|
||||
24
apps/public/content/pages/cookies.mdx
Normal file
24
apps/public/content/pages/cookies.mdx
Normal file
@@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Cookies
|
||||
description: Cookie monster's policy
|
||||
---
|
||||
|
||||
We use cookies and similar technologies to help provide, protect, and improve your experience on our website. This policy explains how and why we use these technologies and the choices you have.
|
||||
|
||||
## What are cookies?
|
||||
|
||||
Cookies are small data files that are placed on your computer or mobile device when you visit a website. They are widely used to make websites work more efficiently and provide useful information to website owners.
|
||||
|
||||
## How we use cookies
|
||||
|
||||
We use cookies for several purposes, including:
|
||||
- **Essential cookies**: Required for basic site functionality
|
||||
- **Analytics cookies**: Help us understand how visitors interact with our website
|
||||
- **Preference cookies**: Remember your settings and preferences
|
||||
|
||||
## Your choices
|
||||
|
||||
Most web browsers allow you to control cookies through their settings preferences. However, limiting cookies may impact your experience using our website.
|
||||
|
||||
For more information about cookies, visit [AllAboutCookies.org](https://www.allaboutcookies.org/).
|
||||
|
||||
18
apps/public/content/pages/pricing.mdx
Normal file
18
apps/public/content/pages/pricing.mdx
Normal file
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: Pricing
|
||||
description: Our simple, usage-based pricing means you only pay for what you use. Scale effortlessly for the best value.
|
||||
---
|
||||
import Pricing from '@/components/sections/pricing';
|
||||
import Stats from '@/components/sections/stats';
|
||||
import Testimonials from '@/components/sections/testimonials';
|
||||
import Faq from '@/components/sections/Faq';
|
||||
|
||||
Experience transparent, usage-based pricing that grows with your needs. Simply choose your monthly event volume and pay accordingly - no surprises.
|
||||
|
||||
All features are included in every plan, with no hidden fees or artificial feature restrictions. What you see is what you get.
|
||||
|
||||
<div className="lg:-mx-20 xl:-mx-40 not-prose -mt-16">
|
||||
<Pricing />
|
||||
<Testimonials />
|
||||
<Faq />
|
||||
</div>
|
||||
212
apps/public/content/pages/privacy.mdx
Normal file
212
apps/public/content/pages/privacy.mdx
Normal file
@@ -0,0 +1,212 @@
|
||||
---
|
||||
title: Privacy Policy
|
||||
description: Our privacy policy outlines how we handle your data, including usage information and cookies, to provide and improve our services.
|
||||
---
|
||||
|
||||
This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your information when You use the Service and tells You about Your privacy rights and how the law protects You.
|
||||
|
||||
We use Your Personal data to provide and improve the Service. By using the Service, You agree to the collection and use of information in accordance with this Privacy Policy.
|
||||
|
||||
## Interpretation and Definitions
|
||||
|
||||
### Interpretation
|
||||
|
||||
The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.
|
||||
|
||||
### Definitions
|
||||
|
||||
For the purposes of this Privacy Policy:
|
||||
|
||||
- **Account** means a unique account created for You to access our Service or parts of our Service.
|
||||
|
||||
- **Affiliate** means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.
|
||||
|
||||
- **Application** refers to Openpanel, the software program provided by the Company.
|
||||
|
||||
- **Company** (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to Coderax AB, Sankt Eriksgatan 100, 113 31, Stockholm.
|
||||
|
||||
- **Cookies** are small files that are placed on Your computer, mobile device or any other device by a website, containing the details of Your browsing history on that website among its many uses.
|
||||
|
||||
- **Country** refers to: Sweden
|
||||
|
||||
- **Device** means any device that can access the Service such as a computer, a cellphone or a digital tablet.
|
||||
|
||||
- **Personal Data** is any information that relates to an identified or identifiable individual.
|
||||
|
||||
- **Service** refers to the Application or the Website or both.
|
||||
|
||||
- **Service Provider** means any natural or legal person who processes the data on behalf of the Company. It refers to third-party companies or individuals employed by the Company to facilitate the Service, to provide the Service on behalf of the Company, to perform services related to the Service or to assist the Company in analyzing how the Service is used.
|
||||
|
||||
- **Usage Data** refers to data collected automatically, either generated by the use of the Service or from the Service infrastructure itself (for example, the duration of a page visit).
|
||||
|
||||
- **Website** refers to Openpanel, accessible from [https://openpanel.dev](https://openpanel.dev)
|
||||
|
||||
- **You** means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable.
|
||||
|
||||
## Collecting and Using Your Personal Data
|
||||
|
||||
### Types of Data Collected
|
||||
|
||||
#### Personal Data
|
||||
|
||||
While using Our Service, We may ask You to provide Us with certain personally identifiable information that can be used to contact or identify You. Personally identifiable information may include, but is not limited to:
|
||||
|
||||
- Email address
|
||||
- First name and last name
|
||||
- Usage Data
|
||||
|
||||
#### Usage Data
|
||||
|
||||
Usage Data is collected automatically when using the Service.
|
||||
|
||||
Usage Data may include information such as Your Device's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that You visit, the time and date of Your visit, the time spent on those pages, unique device identifiers and other diagnostic data.
|
||||
|
||||
When You access the Service by or through a mobile device, We may collect certain information automatically, including, but not limited to, the type of mobile device You use, Your mobile device unique ID, the IP address of Your mobile device, Your mobile operating system, the type of mobile Internet browser You use, unique device identifiers and other diagnostic data.
|
||||
|
||||
We may also collect information that Your browser sends whenever You visit our Service or when You access the Service by or through a mobile device.
|
||||
|
||||
#### Tracking Technologies and Cookies
|
||||
|
||||
We use Cookies and similar tracking technologies to track the activity on Our Service and store certain information. Tracking technologies used are beacons, tags, and scripts to collect and track information and to improve and analyze Our Service. The technologies We use may include:
|
||||
|
||||
- **Cookies or Browser Cookies.** A cookie is a small file placed on Your Device. You can instruct Your browser to refuse all Cookies or to indicate when a Cookie is being sent. However, if You do not accept Cookies, You may not be able to use some parts of our Service. Unless you have adjusted Your browser setting so that it will refuse Cookies, our Service may use Cookies.
|
||||
|
||||
- **Web Beacons.** Certain sections of our Service and our emails may contain small electronic files known as web beacons (also referred to as clear gifs, pixel tags, and single-pixel gifs) that permit the Company, for example, to count users who have visited those pages or opened an email and for other related website statistics (for example, recording the popularity of a certain section and verifying system and server integrity).
|
||||
|
||||
Cookies can be "Persistent" or "Session" Cookies. Persistent Cookies remain on Your personal computer or mobile device when You go offline, while Session Cookies are deleted as soon as You close Your web browser. You can learn more about cookies [here](https://www.termsfeed.com/blog/cookies/#What_Are_Cookies).
|
||||
|
||||
We use both Session and Persistent Cookies for the purposes set out below:
|
||||
|
||||
- **Necessary / Essential Cookies**
|
||||
|
||||
Type: Session Cookies
|
||||
|
||||
Administered by: Us
|
||||
|
||||
Purpose: These Cookies are essential to provide You with services available through the Website and to enable You to use some of its features. They help to authenticate users and prevent fraudulent use of user accounts. Without these Cookies, the services that You have asked for cannot be provided, and We only use these Cookies to provide You with those services.
|
||||
|
||||
- **Cookies Policy / Notice Acceptance Cookies**
|
||||
|
||||
Type: Persistent Cookies
|
||||
|
||||
Administered by: Us
|
||||
|
||||
Purpose: These Cookies identify if users have accepted the use of cookies on the Website.
|
||||
|
||||
- **Functionality Cookies**
|
||||
|
||||
Type: Persistent Cookies
|
||||
|
||||
Administered by: Us
|
||||
|
||||
Purpose: These Cookies allow us to remember choices You make when You use the Website, such as remembering your login details or language preference. The purpose of these Cookies is to provide You with a more personal experience and to avoid You having to re-enter your preferences every time You use the Website.
|
||||
|
||||
For more information about the cookies we use and your choices regarding cookies, please visit our Cookies Policy or the Cookies section of our Privacy Policy.
|
||||
|
||||
### Use of Your Personal Data
|
||||
|
||||
The Company may use Personal Data for the following purposes:
|
||||
|
||||
- **To provide and maintain our Service**, including to monitor the usage of our Service.
|
||||
|
||||
- **To manage Your Account:** to manage Your registration as a user of the Service. The Personal Data You provide can give You access to different functionalities of the Service that are available to You as a registered user.
|
||||
|
||||
- **For the performance of a contract:** the development, compliance and undertaking of the purchase contract for the products, items or services You have purchased or of any other contract with Us through the Service.
|
||||
|
||||
- **To contact You:** To contact You by email, telephone calls, SMS, or other equivalent forms of electronic communication, such as a mobile application's push notifications regarding updates or informative communications related to the functionalities, products or contracted services, including the security updates, when necessary or reasonable for their implementation.
|
||||
|
||||
- **To provide You** with news, special offers and general information about other goods, services and events which we offer that are similar to those that you have already purchased or enquired about unless You have opted not to receive such information.
|
||||
|
||||
- **To manage Your requests:** To attend and manage Your requests to Us.
|
||||
|
||||
- **For business transfers:** We may use Your information to evaluate or conduct a merger, divestiture, restructuring, reorganization, dissolution, or other sale or transfer of some or all of Our assets, whether as a going concern or as part of bankruptcy, liquidation, or similar proceeding, in which Personal Data held by Us about our Service users is among the assets transferred.
|
||||
|
||||
- **For other purposes**: We may use Your information for other purposes, such as data analysis, identifying usage trends, determining the effectiveness of our promotional campaigns and to evaluate and improve our Service, products, services, marketing and your experience.
|
||||
|
||||
We may share Your personal information in the following situations:
|
||||
|
||||
- **With Service Providers:** We may share Your personal information with Service Providers to monitor and analyze the use of our Service, to contact You.
|
||||
|
||||
- **For business transfers:** We may share or transfer Your personal information in connection with, or during negotiations of, any merger, sale of Company assets, financing, or acquisition of all or a portion of Our business to another company.
|
||||
|
||||
- **With Affiliates:** We may share Your information with Our affiliates, in which case we will require those affiliates to honor this Privacy Policy. Affiliates include Our parent company and any other subsidiaries, joint venture partners or other companies that We control or that are under common control with Us.
|
||||
|
||||
- **With business partners:** We may share Your information with Our business partners to offer You certain products, services or promotions.
|
||||
|
||||
- **With other users:** when You share personal information or otherwise interact in the public areas with other users, such information may be viewed by all users and may be publicly distributed outside.
|
||||
|
||||
- **With Your consent**: We may disclose Your personal information for any other purpose with Your consent.
|
||||
|
||||
### Retention of Your Personal Data
|
||||
|
||||
The Company will retain Your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use Your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.
|
||||
|
||||
The Company will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter period of time, except when this data is used to strengthen the security or to improve the functionality of Our Service, or We are legally obligated to retain this data for longer time periods.
|
||||
|
||||
### Transfer of Your Personal Data
|
||||
|
||||
Your information, including Personal Data, is processed at the Company's operating offices and in any other places where the parties involved in the processing are located. It means that this information may be transferred to — and maintained on — computers located outside of Your state, province, country or other governmental jurisdiction where the data protection laws may differ than those from Your jurisdiction.
|
||||
|
||||
Your consent to this Privacy Policy followed by Your submission of such information represents Your agreement to that transfer.
|
||||
|
||||
The Company will take all steps reasonably necessary to ensure that Your data is treated securely and in accordance with this Privacy Policy and no transfer of Your Personal Data will take place to an organization or a country unless there are adequate controls in place including the security of Your data and other personal information.
|
||||
|
||||
### Delete Your Personal Data
|
||||
|
||||
You have the right to delete or request that We assist in deleting the Personal Data that We have collected about You.
|
||||
|
||||
Our Service may give You the ability to delete certain information about You from within the Service.
|
||||
|
||||
You may update, amend, or delete Your information at any time by signing in to Your Account, if you have one, and visiting the account settings section that allows you to manage Your personal information. You may also contact Us to request access to, correct, or delete any personal information that You have provided to Us.
|
||||
|
||||
Please note, however, that We may need to retain certain information when we have a legal obligation or lawful basis to do so.
|
||||
|
||||
### Disclosure of Your Personal Data
|
||||
|
||||
#### Business Transactions
|
||||
|
||||
If the Company is involved in a merger, acquisition or asset sale, Your Personal Data may be transferred. We will provide notice before Your Personal Data is transferred and becomes subject to a different Privacy Policy.
|
||||
|
||||
#### Law enforcement
|
||||
|
||||
Under certain circumstances, the Company may be required to disclose Your Personal Data if required to do so by law or in response to valid requests by public authorities (e.g. a court or a government agency).
|
||||
|
||||
#### Other legal requirements
|
||||
|
||||
The Company may disclose Your Personal Data in the good faith belief that such action is necessary to:
|
||||
|
||||
- Comply with a legal obligation
|
||||
- Protect and defend the rights or property of the Company
|
||||
- Prevent or investigate possible wrongdoing in connection with the Service
|
||||
- Protect the personal safety of Users of the Service or the public
|
||||
- Protect against legal liability
|
||||
|
||||
### Security of Your Personal Data
|
||||
|
||||
The security of Your Personal Data is important to Us, but remember that no method of transmission over the Internet, or method of electronic storage is 100% secure. While We strive to use commercially acceptable means to protect Your Personal Data, We cannot guarantee its absolute security.
|
||||
|
||||
## Children's Privacy
|
||||
|
||||
Our Service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from anyone under the age of 13. If You are a parent or guardian and You are aware that Your child has provided Us with Personal Data, please contact Us. If We become aware that We have collected Personal Data from anyone under the age of 13 without verification of parental consent, We take steps to remove that information from Our servers.
|
||||
|
||||
If We need to rely on consent as a legal basis for processing Your information and Your country requires consent from a parent, We may require Your parent's consent before We collect and use that information.
|
||||
|
||||
## Links to Other Websites
|
||||
|
||||
Our Service may contain links to other websites that are not operated by Us. If You click on a third party link, You will be directed to that third party's site. We strongly advise You to review the Privacy Policy of every site You visit.
|
||||
|
||||
We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services.
|
||||
|
||||
## Changes to this Privacy Policy
|
||||
|
||||
We may update Our Privacy Policy from time to time. We will notify You of any changes by posting the new Privacy Policy on this page.
|
||||
|
||||
We will let You know via email and/or a prominent notice on Our Service, prior to the change becoming effective and update the "Last updated" date at the top of this Privacy Policy.
|
||||
|
||||
You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.
|
||||
|
||||
## Contact Us
|
||||
|
||||
If you have any questions about this Privacy Policy, You can contact us:
|
||||
|
||||
- By email: hello@openpanel.dev
|
||||
192
apps/public/content/pages/terms.mdx
Normal file
192
apps/public/content/pages/terms.mdx
Normal file
@@ -0,0 +1,192 @@
|
||||
---
|
||||
title: Terms of Service
|
||||
description: Legal terms and conditions governing the use of Openpanel's services and website.
|
||||
---
|
||||
|
||||
Please read these terms and conditions carefully before using Our Service.
|
||||
|
||||
## Interpretation and Definitions
|
||||
|
||||
### Interpretation
|
||||
|
||||
The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.
|
||||
|
||||
### Definitions
|
||||
|
||||
For the purposes of these Terms and Conditions:
|
||||
|
||||
- **Application** means the software program provided by the Company downloaded by You on any electronic device, named Openpanel
|
||||
|
||||
- **Application Store** means the digital distribution service operated and developed by Apple Inc. (Apple App Store) or Google Inc. (Google Play Store) in which the Application has been downloaded.
|
||||
|
||||
- **Affiliate** means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.
|
||||
|
||||
- **Account** means a unique account created for You to access our Service or parts of our Service.
|
||||
|
||||
- **Country** refers to: Sweden
|
||||
|
||||
- **Company** (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to Coderax AB, Sankt Eriksgatan 100, 113 31, Stockholm.
|
||||
|
||||
- **Device** means any device that can access the Service such as a computer, a cellphone or a digital tablet.
|
||||
|
||||
- **Free Trial** refers to a limited period of time that may be free when purchasing a Subscription.
|
||||
|
||||
- **Service** refers to the Application or the Website or both.
|
||||
|
||||
- **Subscriptions** refer to the services or access to the Service offered on a subscription basis by the Company to You.
|
||||
|
||||
- **Terms and Conditions** (also referred as "Terms") mean these Terms and Conditions that form the entire agreement between You and the Company regarding the use of the Service.
|
||||
|
||||
- **Third-party Social Media Service** means any services or content (including data, information, products or services) provided by a third-party that may be displayed, included or made available by the Service.
|
||||
|
||||
- **Website** refers to Openpanel, accessible from [https://openpanel.dev](https://openpanel.dev)
|
||||
|
||||
- **You** means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable.
|
||||
|
||||
## Acknowledgment
|
||||
|
||||
These are the Terms and Conditions governing the use of this Service and the agreement that operates between You and the Company. These Terms and Conditions set out the rights and obligations of all users regarding the use of the Service.
|
||||
|
||||
Your access to and use of the Service is conditioned on Your acceptance of and compliance with these Terms and Conditions. These Terms and Conditions apply to all visitors, users and others who access or use the Service.
|
||||
|
||||
By accessing or using the Service You agree to be bound by these Terms and Conditions. If You disagree with any part of these Terms and Conditions then You may not access the Service.
|
||||
|
||||
You represent that you are over the age of 18. The Company does not permit those under 18 to use the Service.
|
||||
|
||||
Your access to and use of the Service is also conditioned on Your acceptance of and compliance with the Privacy Policy of the Company. Our Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your personal information when You use the Application or the Website and tells You about Your privacy rights and how the law protects You. Please read Our Privacy Policy carefully before using Our Service.
|
||||
|
||||
## Subscriptions
|
||||
|
||||
### Subscription period
|
||||
|
||||
The Service or some parts of the Service are available only with a paid Subscription. You will be billed in advance on a recurring and periodic basis (such as daily, weekly, monthly or annually), depending on the type of Subscription plan you select when purchasing the Subscription.
|
||||
|
||||
At the end of each period, Your Subscription will automatically renew under the exact same conditions unless You cancel it or the Company cancels it.
|
||||
|
||||
### Subscription cancellations
|
||||
|
||||
You may cancel Your Subscription renewal either through Your Account settings page or by contacting the Company. You will not receive a refund for the fees You already paid for Your current Subscription period and You will be able to access the Service until the end of Your current Subscription period.
|
||||
|
||||
### Billing
|
||||
|
||||
You shall provide the Company with accurate and complete billing information including full name, address, state, zip code, telephone number, and a valid payment method information.
|
||||
|
||||
Should automatic billing fail to occur for any reason, the Company will issue an electronic invoice indicating that you must proceed manually, within a certain deadline date, with the full payment corresponding to the billing period as indicated on the invoice.
|
||||
|
||||
### Fee Changes
|
||||
|
||||
The Company, in its sole discretion and at any time, may modify the Subscription fees. Any Subscription fee change will become effective at the end of the then-current Subscription period.
|
||||
|
||||
The Company will provide You with reasonable prior notice of any change in Subscription fees to give You an opportunity to terminate Your Subscription before such change becomes effective.
|
||||
|
||||
Your continued use of the Service after the Subscription fee change comes into effect constitutes Your agreement to pay the modified Subscription fee amount.
|
||||
|
||||
### Refunds
|
||||
|
||||
Except when required by law, paid Subscription fees are non-refundable.
|
||||
|
||||
Certain refund requests for Subscriptions may be considered by the Company on a case-by-case basis and granted at the sole discretion of the Company.
|
||||
|
||||
### Free Trial
|
||||
|
||||
The Company may, at its sole discretion, offer a Subscription with a Free Trial for a limited period of time.
|
||||
|
||||
You may be required to enter Your billing information in order to sign up for the Free Trial.
|
||||
|
||||
If You do enter Your billing information when signing up for a Free Trial, You will not be charged by the Company until the Free Trial has expired. On the last day of the Free Trial period, unless You canceled Your Subscription, You will be automatically charged the applicable Subscription fees for the type of Subscription You have selected.
|
||||
|
||||
At any time and without notice, the Company reserves the right to (i) modify the terms and conditions of the Free Trial offer, or (ii) cancel such Free Trial offer.
|
||||
|
||||
## User Accounts
|
||||
|
||||
When You create an account with Us, You must provide Us information that is accurate, complete, and current at all times. Failure to do so constitutes a breach of the Terms, which may result in immediate termination of Your account on Our Service.
|
||||
|
||||
You are responsible for safeguarding the password that You use to access the Service and for any activities or actions under Your password, whether Your password is with Our Service or a Third-Party Social Media Service.
|
||||
|
||||
You agree not to disclose Your password to any third party. You must notify Us immediately upon becoming aware of any breach of security or unauthorized use of Your account.
|
||||
|
||||
You may not use as a username the name of another person or entity or that is not lawfully available for use, a name or trademark that is subject to any rights of another person or entity other than You without appropriate authorization, or a name that is otherwise offensive, vulgar or obscene.
|
||||
|
||||
## Intellectual Property
|
||||
|
||||
The Service and its original content (excluding Content provided by You or other users), features and functionality are and will remain the exclusive property of the Company and its licensors.
|
||||
|
||||
The Service is protected by copyright, trademark, and other laws of both the Country and foreign countries.
|
||||
|
||||
Our trademarks and trade dress may not be used in connection with any product or service without the prior written consent of the Company.
|
||||
|
||||
## Links to Other Websites
|
||||
|
||||
Our Service may contain links to third-party web sites or services that are not owned or controlled by the Company.
|
||||
|
||||
The Company has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that the Company shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with the use of or reliance on any such content, goods or services available on or through any such web sites or services.
|
||||
|
||||
We strongly advise You to read the terms and conditions and privacy policies of any third-party web sites or services that You visit.
|
||||
|
||||
## Termination
|
||||
|
||||
We may terminate or suspend Your Account immediately, without prior notice or liability, for any reason whatsoever, including without limitation if You breach these Terms and Conditions.
|
||||
|
||||
Upon termination, Your right to use the Service will cease immediately. If You wish to terminate Your Account, You may simply discontinue using the Service.
|
||||
|
||||
## Limitation of Liability
|
||||
|
||||
Notwithstanding any damages that You might incur, the entire liability of the Company and any of its suppliers under any provision of this Terms and Your exclusive remedy for all of the foregoing shall be limited to the amount actually paid by You through the Service or 100 USD if You haven't purchased anything through the Service.
|
||||
|
||||
To the maximum extent permitted by applicable law, in no event shall the Company or its suppliers be liable for any special, incidental, indirect, or consequential damages whatsoever (including, but not limited to, damages for loss of profits, loss of data or other information, for business interruption, for personal injury, loss of privacy arising out of or in any way related to the use of or inability to use the Service, third-party software and/or third-party hardware used with the Service, or otherwise in connection with any provision of this Terms), even if the Company or any supplier has been advised of the possibility of such damages and even if the remedy fails of its essential purpose.
|
||||
|
||||
Some states do not allow the exclusion of implied warranties or limitation of liability for incidental or consequential damages, which means that some of the above limitations may not apply. In these states, each party's liability will be limited to the greatest extent permitted by law.
|
||||
|
||||
## "AS IS" and "AS AVAILABLE" Disclaimer
|
||||
|
||||
The Service is provided to You "AS IS" and "AS AVAILABLE" and with all faults and defects without warranty of any kind. To the maximum extent permitted under applicable law, the Company, on its own behalf and on behalf of its Affiliates and its and their respective licensors and service providers, expressly disclaims all warranties, whether express, implied, statutory or otherwise, with respect to the Service, including all implied warranties of merchantability, fitness for a particular purpose, title and non-infringement, and warranties that may arise out of course of dealing, course of performance, usage or trade practice. Without limitation to the foregoing, the Company provides no warranty or undertaking, and makes no representation of any kind that the Service will meet Your requirements, achieve any intended results, be compatible or work with any other software, applications, systems or services, operate without interruption, meet any performance or reliability standards or be error free or that any errors or defects can or will be corrected.
|
||||
|
||||
Without limiting the foregoing, neither the Company nor any of the company's provider makes any representation or warranty of any kind, express or implied: (i) as to the operation or availability of the Service, or the information, content, and materials or products included thereon; (ii) that the Service will be uninterrupted or error-free; (iii) as to the accuracy, reliability, or currency of any information or content provided through the Service; or (iv) that the Service, its servers, the content, or e-mails sent from or on behalf of the Company are free of viruses, scripts, trojan horses, worms, malware, timebombs or other harmful components.
|
||||
|
||||
Some jurisdictions do not allow the exclusion of certain types of warranties or limitations on applicable statutory rights of a consumer, so some or all of the above exclusions and limitations may not apply to You. But in such a case the exclusions and limitations set forth in this section shall be applied to the greatest extent enforceable under applicable law.
|
||||
|
||||
## Governing Law
|
||||
|
||||
The laws of the Country, excluding its conflicts of law rules, shall govern this Terms and Your use of the Service. Your use of the Application may also be subject to other local, state, national, or international laws.
|
||||
|
||||
## Disputes Resolution
|
||||
|
||||
If You have any concern or dispute about the Service, You agree to first try to resolve the dispute informally by contacting the Company.
|
||||
|
||||
## For European Union (EU) Users
|
||||
|
||||
If You are a European Union consumer, you will benefit from any mandatory provisions of the law of the country in which You are resident.
|
||||
|
||||
## United States Federal Government End Use Provisions
|
||||
|
||||
If You are a U.S. federal government end user, our Service is a "Commercial Item" as that term is defined at 48 C.F.R. §2.101.
|
||||
|
||||
## United States Legal Compliance
|
||||
|
||||
You represent and warrant that (i) You are not located in a country that is subject to the United States government embargo, or that has been designated by the United States government as a "terrorist supporting" country, and (ii) You are not listed on any United States government list of prohibited or restricted parties.
|
||||
|
||||
## Severability and Waiver
|
||||
|
||||
### Severability
|
||||
|
||||
If any provision of these Terms is held to be unenforceable or invalid, such provision will be changed and interpreted to accomplish the objectives of such provision to the greatest extent possible under applicable law and the remaining provisions will continue in full force and effect.
|
||||
|
||||
### Waiver
|
||||
|
||||
Except as provided herein, the failure to exercise a right or to require performance of an obligation under these Terms shall not affect a party's ability to exercise such right or require such performance at any time thereafter nor shall the waiver of a breach constitute a waiver of any subsequent breach.
|
||||
|
||||
## Translation Interpretation
|
||||
|
||||
These Terms and Conditions may have been translated if We have made them available to You on our Service. You agree that the original English text shall prevail in the case of a dispute.
|
||||
|
||||
## Changes to These Terms and Conditions
|
||||
|
||||
We reserve the right, at Our sole discretion, to modify or replace these Terms at any time. If a revision is material We will make reasonable efforts to provide at least 30 days' notice prior to any new terms taking effect. What constitutes a material change will be determined at Our sole discretion.
|
||||
|
||||
By continuing to access or use Our Service after those revisions become effective, You agree to be bound by the revised terms. If You do not agree to the new terms, in whole or in part, please stop using the website and the Service.
|
||||
|
||||
## Contact Us
|
||||
|
||||
If you have any questions about these Terms and Conditions, You can contact us:
|
||||
|
||||
- By email: hello@openpanel.dev
|
||||
Reference in New Issue
Block a user