mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 07:48:37 +01:00
455 lines
17 KiB
Vue
455 lines
17 KiB
Vue
<script lang="ts" setup>
|
||
|
||
definePageMeta({ layout: 'header' });
|
||
|
||
import { blogPosts } from '~/blog/Blog';
|
||
|
||
definePageMeta({ layout: 'header' });
|
||
const route = useRoute();
|
||
const id = route.path.replace('/blog/', '');
|
||
const blogPost = blogPosts.value.find(e => e.id == id);
|
||
|
||
useSeoMeta({
|
||
title: () => `Litlyx Blog - ${blogPost?.title}`,
|
||
ogTitle: () => `Litlyx Blog - ${blogPost?.title}`,
|
||
description: () => blogPost?.subtitle,
|
||
ogDescription: () => blogPost?.subtitle,
|
||
keywords: 'Litlyx blog, analytics insights, real-time analytics, AI-powered analytics, data visualization, performance metrics, KPI tracking, custom events, open-source analytics, business intelligence, data trends, developer insights, analytics updates, data-driven decisions, blog updates, tech news, Litlyx updates, analytics best practices',
|
||
author: () => blogPost?.author,
|
||
ogImage: () => 'https://litlyx.com/blog/' + blogPost?.image,
|
||
ogType: 'website',
|
||
ogUrl: 'https://litlyx.com/blog',
|
||
twitterCard: 'summary_large_image',
|
||
twitterTitle: () => `Litlyx Blog - ${blogPost?.title}`,
|
||
twitterDescription: () => blogPost?.subtitle,
|
||
twitterImage: () => 'https://litlyx.com/blog/' + blogPost?.image,
|
||
ogSiteName: 'Litlyx',
|
||
ogLocale: 'en_US',
|
||
ogImageWidth: '1200',
|
||
ogImageHeight: '630'
|
||
})
|
||
|
||
const featureStyle = 'font-bold poppins text-lyx-text';
|
||
const cellStyle = 'poppins text-lyx-text'
|
||
const activeStyle = 'poppins !text-lyx-text border-solid border-[1px] border-green-400 bg-green-400/5'
|
||
|
||
|
||
const columns = [{
|
||
key: 'feature',
|
||
label: 'Feature'
|
||
}, {
|
||
key: 'litlyx',
|
||
label: 'Litlyx'
|
||
}, {
|
||
key: 'plausible',
|
||
label: 'Plausible'
|
||
}, {
|
||
key: 'google',
|
||
label: 'Google Analytics'
|
||
}]
|
||
|
||
const comparisons = ref<any[]>([
|
||
{
|
||
feature: { text: 'Setup Time', class: featureStyle },
|
||
litlyx: { text: '30 seconds', class: activeStyle },
|
||
plausible: { text: 'A few Minutes', class: cellStyle },
|
||
google: { text: 'Hours', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Real-Time Collection', class: featureStyle },
|
||
litlyx: { text: 'Instant', class: activeStyle },
|
||
plausible: { text: 'each 5 minutes', class: cellStyle },
|
||
google: { text: 'from few minutes, to hours', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Documentation', class: featureStyle },
|
||
litlyx: { text: 'Small, Easy & Modern', class: activeStyle },
|
||
plausible: { text: 'Longer than necessary', class: cellStyle },
|
||
google: { text: 'Mstodon & Complex', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Modern UI', class: featureStyle },
|
||
litlyx: { text: 'Yes', class: activeStyle },
|
||
plausible: { text: 'Yes', class: activeStyle },
|
||
google: { text: 'Yes', class: activeStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Developers Centric Approach', class: featureStyle },
|
||
litlyx: { text: 'Yes', class: activeStyle },
|
||
plausible: { text: 'Partially', class: cellStyle },
|
||
google: { text: 'No', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Website Loading Time', class: featureStyle },
|
||
litlyx: { text: '3 ms', class: activeStyle },
|
||
plausible: { text: '3 ms', class: activeStyle },
|
||
google: { text: '5-15 ms', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Library Size', class: featureStyle },
|
||
litlyx: { text: '3 kb', class: '' },
|
||
plausible: { text: '2 kb', class: activeStyle },
|
||
google: { text: 'avg. 50 kb', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Custom Events Support', class: featureStyle },
|
||
litlyx: { text: 'Yes', class: activeStyle },
|
||
plausible: { text: 'Yes', class: activeStyle },
|
||
google: { text: 'Yes', class: activeStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Native Js Runtimes', class: featureStyle },
|
||
litlyx: { text: 'Yes', class: activeStyle },
|
||
plausible: { text: 'No', class: cellStyle },
|
||
google: { text: 'No', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Custom Events metadata Support', class: featureStyle },
|
||
litlyx: { text: 'Yes', class: activeStyle },
|
||
plausible: { text: 'No', class: cellStyle },
|
||
google: { text: 'Limited', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Raw Data Export', class: featureStyle },
|
||
litlyx: { text: 'Yes', class: activeStyle },
|
||
plausible: { text: 'No', class: cellStyle },
|
||
google: { text: 'No', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Data Ownership', class: featureStyle },
|
||
litlyx: { text: 'Yes', class: activeStyle },
|
||
plausible: { text: 'Yes', class: activeStyle },
|
||
google: { text: 'No', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Open-Source', class: featureStyle },
|
||
litlyx: { text: 'Self-Hostable', class: activeStyle },
|
||
plausible: { text: 'Self-Hostable', class: activeStyle },
|
||
google: { text: 'No', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Privacy-focused', class: featureStyle },
|
||
litlyx: { text: 'Yes', class: activeStyle },
|
||
plausible: { text: 'Yes', class: activeStyle },
|
||
google: { text: 'No', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Cookies Stored', class: featureStyle },
|
||
litlyx: { text: '0 Cookies', class: activeStyle },
|
||
plausible: { text: '0 Cookies', class: activeStyle },
|
||
google: { text: 'Yes, many', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'EU standard', class: featureStyle },
|
||
litlyx: { text: 'Yes', class: activeStyle },
|
||
plausible: { text: 'Yes', class: activeStyle },
|
||
google: { text: 'Limited', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Ad Blockers', class: featureStyle },
|
||
litlyx: { text: 'Impossible to block', class: activeStyle },
|
||
plausible: { text: 'Possible, but hard!', class: cellStyle },
|
||
google: { text: 'Possible', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'AI Data Analyst Assistant', class: featureStyle },
|
||
litlyx: { text: 'Yes', class: activeStyle },
|
||
plausible: { text: 'No', class: cellStyle },
|
||
google: { text: 'No', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Report Generation', class: featureStyle },
|
||
litlyx: { text: 'Detailed reports in seconds', class: activeStyle },
|
||
plausible: { text: 'Basic Reports', class: cellStyle },
|
||
google: { text: 'Extensive, but complex to do', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'User-Friendly interface', class: featureStyle },
|
||
litlyx: { text: 'Yes', class: activeStyle },
|
||
plausible: { text: 'Yes', class: activeStyle },
|
||
google: { text: 'Moderate Complexity', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Agglomeration from third parties DB’s', class: featureStyle },
|
||
litlyx: { text: 'Yes', class: activeStyle },
|
||
plausible: { text: 'No', class: cellStyle },
|
||
google: { text: 'No', class: cellStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Free Options (Cloud)', class: featureStyle },
|
||
litlyx: { text: 'Free-Forever plan to start.', class: activeStyle },
|
||
plausible: { text: '30 days free trial.', class: cellStyle },
|
||
google: { text: 'Free forever. No Ownership.', class: activeStyle }
|
||
},
|
||
{
|
||
feature: { text: 'Cost Effective (Cloud)', class: featureStyle },
|
||
litlyx: { text: 'Basic plan: €4,99/mo for 50k visits/events', class: activeStyle },
|
||
plausible: { text: 'Basic plan: €9,00/mo for 10k page visits', class: cellStyle },
|
||
google: { text: 'Offers Enterprise only Premium prices (really expansive)', class: cellStyle }
|
||
}
|
||
]);
|
||
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<BlogArticleWrapper>
|
||
<div class="px-0">
|
||
|
||
<div class="section">
|
||
<div class="title">
|
||
Why Choose Litlyx
|
||
</div>
|
||
|
||
<div class="paragraph">
|
||
Our product is simple and focuses on the developer's experience. Developers love free stuff, so
|
||
Litlyx
|
||
offers a generous Free-Forever plan to get started. Developers don't want to waste time setting up
|
||
complex analytics to track key metrics for their websites. So, we asked ourselves, 'What would
|
||
developers find easy and cool?' As a team of developers, we created the simplest, most optimized,
|
||
and
|
||
developer-friendly way to do analytics.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="title">
|
||
Litlyx vs Plausible vs Google Analytics Comparison Table
|
||
</div>
|
||
|
||
<div class="paragraph">
|
||
Comparisons between the most common softwares used for web analytics collection and Litlyx.
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="section">
|
||
|
||
<div class="hidden lg:flex lg:justify-center w-full lg:flex-nowrap">
|
||
<UTable :rows="comparisons" :columns="columns" :ui="{
|
||
td: {
|
||
base: 'border-x-[1px] border-solid border-lyx-widget-lighter'
|
||
},
|
||
th: {
|
||
base: 'border-[1px] border-solid border-lyx-widget-lighter bg-lyx-widget'
|
||
}
|
||
}">
|
||
|
||
<template #litlyx-data="{ row }">
|
||
{{ row.litlyx.text }}
|
||
</template>
|
||
<template #feature-data="{ row }">
|
||
{{ row.feature.text }}
|
||
</template>
|
||
<template #plausible-data="{ row }">
|
||
{{ row.plausible.text }}
|
||
</template>
|
||
<template #google-data="{ row }">
|
||
{{ row.google.text }}
|
||
</template>
|
||
</UTable>
|
||
</div>
|
||
|
||
<div class="lg:hidden text-lyx-text-dark">
|
||
[Table available only on desktop]
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="section">
|
||
<div class="title">
|
||
Google Analytics vs. Litlyx
|
||
</div>
|
||
<ul class="list-disc text-lyx-text-dark mt-4">
|
||
<li>
|
||
Ease of Use: Google Analytics can be complex, with many features that may be overwhelming when
|
||
reading its documentation. Litlyx is simple and easy to use.
|
||
</li>
|
||
<li>
|
||
Setup: Google Analytics requires more time to set up, whereas Litlyx is quick and easy to set up
|
||
(just 30 seconds).
|
||
</li>
|
||
<li>
|
||
Free Plan: Google Analytics offers a free plan, but you do not own your data. Litlyx offers a
|
||
Free-Forever plan with generous limits, and you can handle raw data.
|
||
</li>
|
||
<li>
|
||
Developer Focus: Google Analytics is for general users, with libraries written by third parties.
|
||
Litlyx is built with developers in mind, supporting all tech stacks natively.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<div class="section">
|
||
<div class="title">
|
||
Plausible vs. Litlyx <span class="text-[.9rem]">(we ❤️ Plausible)</span>
|
||
</div>
|
||
<ul class="list-disc text-lyx-text-dark mt-4">
|
||
<li>
|
||
Ease of Use: Plausible is simple and user-friendly. Litlyx is also simple and easy to use. Both
|
||
Plausible and Litlyx are awesome!
|
||
</li>
|
||
<li>
|
||
Setup: Plausible setup is quick and easy. Litlyx setup is equally quick and straightforward.
|
||
</li>
|
||
<li>
|
||
Free Plan: Plausible does not offer a free plan, giving you a 30-day free trial before you need
|
||
to
|
||
pay. Litlyx offers a generous Free-Forever plan.
|
||
</li>
|
||
<li>
|
||
|
||
Developer Focus: Plausible is designed for general users with a focus on privacy, whereas Litlyx
|
||
is
|
||
specifically designed for developers.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<div class="section">
|
||
<div class="title">
|
||
Who can use Litlyx?
|
||
</div>
|
||
<div class="paragraph">
|
||
We built Litlyx with developers in mind. If you want really good metrics, you should go through your
|
||
development team. We created the simplest setup a developer can ask for, supporting all JavaScript
|
||
and
|
||
TypeScript runtimes. Litlyx can be used even by startup founders or business owners who have access
|
||
to
|
||
their landing page. We offer extensive support to guide you through the implementation. You can
|
||
contact
|
||
us anytime for information at help@litlyx.com. With Litlyx, you will not be alone.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="title">
|
||
We are far from perfection...
|
||
</div>
|
||
<div class="paragraph">
|
||
We are far from perfect. We are human, and we embrace that. Our imperfections drive us to always
|
||
improve
|
||
and innovate. We learn from our mistakes and use those lessons to create better solutions. By
|
||
acknowledging our humanity, we connect more deeply with our users, understanding their needs and
|
||
challenges. Our commitment to growth and improvement ensures that we constantly strive to deliver
|
||
the
|
||
best possible experience for developers.
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="section">
|
||
<div class="title">
|
||
Is Impossible to Beat a giant, but...
|
||
</div>
|
||
<div class="paragraph">
|
||
We know we can’t compete with Google directly—it’s like trying to challenge a giant. But even giants
|
||
have weaknesses. Startups with bold ideas can find ways to disrupt the status quo and we see this
|
||
many
|
||
times in history. We’re here to support all innovators by providing a first-class developer
|
||
experience
|
||
with our product. Our goal is to empower every size companies to make a significant impact in the
|
||
industry taking matrics driven decisions with semplicity.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="title">
|
||
Help us improve!
|
||
</div>
|
||
<div class="paragraph">
|
||
If you choose us today, you can help us improve and become first-class in analytics. We can’t do
|
||
this
|
||
alone; we need you! Your feedback and suggestions are very valuable to us. By working together, we
|
||
can
|
||
refine our product and create an exceptional experience for developers. Join us on this journey, and
|
||
let's build something amazing together. Your input will help us reach new heights and set the
|
||
standard
|
||
of excellence next-generation developers deserve.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
|
||
<div class="title text-center">
|
||
Ready to start with Litlyx?
|
||
</div>
|
||
|
||
<div class="button-container flex-col items-center gap-6">
|
||
<LyxUiButton link="https://dashboard.litlyx.com/live_demo" target="_blank" class="button"
|
||
type="outline">
|
||
Go to Live Demo
|
||
</LyxUiButton>
|
||
<LyxUiButton link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
|
||
Start for free now
|
||
</LyxUiButton>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</BlogArticleWrapper>
|
||
</template>
|
||
|
||
|
||
<style scoped lang="scss">
|
||
.article * {
|
||
font-family: 'Poppins', sans-serif;
|
||
}
|
||
|
||
article {
|
||
margin: 2rem;
|
||
}
|
||
|
||
header,
|
||
section,
|
||
footer {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
section h2 {
|
||
margin-bottom: 2rem;
|
||
color: white;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.title {
|
||
font-family: 'Poppins' !important;
|
||
@apply font-semibold text-[1.8rem]
|
||
}
|
||
|
||
.subtitle {
|
||
font-family: 'Poppins' !important;
|
||
@apply font-medium text-[1.4rem]
|
||
}
|
||
|
||
.paragraph {
|
||
font-family: 'Poppins' !important;
|
||
@apply text-lyx-text-dark mt-4 text-[1.1rem]
|
||
}
|
||
|
||
.section {
|
||
@apply mt-20
|
||
}
|
||
|
||
.button {
|
||
@apply font-medium text-[1rem] px-6 py-2
|
||
}
|
||
|
||
.button-container {
|
||
@apply flex justify-center mt-8
|
||
}
|
||
</style> |