DOCSEARCHbyAlgolia
Submit Docs

Ulittle Documentation

website·Indexed 32 days ago

https://docs.ulittle.com

A comprehensive Shopify app providing advanced marketing attribution and analytics. Documentation covers installation via the Shopify App Store, a quick start guide for tracking, and modules for campaigns, trajectory, sales modeling, and dashboard analytics.

Tokens
2.4K
Snippets
11
Records
19
Agent score
55%

What's inside Ulittle

  1. Overview of Ulittle marketing attribution for Shopify

    Ulittle is a Shopify app designed for advanced marketing attribution and analytics. It allows merchants to track customer journeys across multiple marketing touch-points, monitor real-time visitor behavior and conversions, and measure the ROI of individual marketing campaigns to optimize marketing spend.

  2. Analyze sales performance and customer LTV with Sales Modeling

    The Sales Modeling module allows users to track sales performance and customer analytics. Its primary advantage is connecting the source of customer acquisition to their lifetime value (LTV), providing insights that standard tools like Shopify Analytics, Google Analytics, and Meta Ads typically miss. This enables developers and business owners to determine the real ROI of marketing channels by identifying which campaigns bring the highest-LTV customers rather than just the most conversions.

  4. Explore and export customer analytics data

    The Customer Analytics section provides a searchable and sortable table to analyze customer behavior and purchasing patterns. Available metrics include:

    • Customer email
    • Segment
    • Total revenue
    • Total orders
    • Average Order Value (AOV)
    • Last order date

    Data can be exported via CSV or Excel for further analysis. Future integrations include direct synchronization with Klaviyo for targeted campaigns based on these segments.

  5. Implement a recursive data structure for a React file system

    To represent a hierarchical file system, use a recursive data structure where each object represents either a file or a folder. Folders must include a children array to hold nested files and folders, while files are leaf nodes.
    const folder = {
  id: "1",
  name: "Documents",
  type: "folder",
  children: [
    { id: "2", name: "Resume.pdf", type: "file" },
    { id: "3", name: "CoverLetter.docx", type: "file" },
  ],
};

  7. Manage state for recursive file system actions

    Use React's useState hook to manage the root of the file system. Implement handler functions for adding, renaming, and deleting items. Because the data is recursive, these functions must traverse the tree to find the target id or parentId before updating the state.
    const [files, setFiles] = useState(initialData);

const addItem = (parentId, type) => {
  // Logic to traverse the tree and push a new object into the children array of parentId
};

const renameItem = (id, newName) => {
  // Logic to find the item by id and update its name property
};

const deleteItem = (id) => {
  // Logic to filter out the item with the matching id from its parent's children array
};

  8. Implement React Server Components in Next.js

    React Server Components (RSC) allow components to render on the server, reducing the amount of JavaScript sent to the client and improving initial page load times. They simplify data fetching by allowing you to fetch data directly on the server and pass it to components.
    import { getUserData } from "../lib/api";

export default async function UserProfile() {
  const user = await getUserData();

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

  9. Implement custom campaign tracking with ulittle

    ulittle uses a custom tracking parameter (tkr) added to URLs to identify traffic sources and attribute revenue. This tracking mechanism operates independently of other tools like Google Analytics or Klaviyo and does not impact their results. To implement tracking, append ?tkr=your_unique_code to your store links. Use consistent, human-readable naming conventions to make filtering and comparing performance easier in the dashboard.
    https://yourshop.com?tkr=sums01
https://yourshop.com/hats/kids?tkr=sums01

  10. Manage sales goals and KPI targets

    Users can define new sales goals or key performance indicators (KPIs) to measure the success of marketing or sales strategies. Goals are created using parameters such as the specific metric, target value, and timeframe. The 'Sales Goals & Targets' section provides a centralized view to monitor these KPIs in real time, with capabilities to filter by goal type or priority and export data for reporting.

  11. Use Next.js Server Actions for form submissions

    Server Actions are asynchronous functions that run on the server in response to client-side interactions. They allow developers to handle server-side logic (like API requests or database updates) directly from React components, enhancing security by keeping sensitive operations off the client.
    // app/actions/submit.js
import { saveFormData } from "../lib/api";

export async function submitForm(data) {
  await saveFormData(data);
  return { success: true };
}

// contactForm.js
"use client";

import { submitForm } from "../actions/submitForm";

export default function ContactForm() {
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await submitForm(Object.fromEntries(formData));
    if (result.success) {
      alert("Form submitted successfully!");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" required />
      </label>
      <label>
        Email:
        <input type="email" name="email" required />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

  12. Verify Ulittle order tracking with a test purchase

    To verify that the app is correctly tracking orders, perform a test purchase using a specific tracker parameter in the URL. Use Shopify's official credit-card testing numbers to complete the transaction.
    URL Format: https://yourstore-name.com?tkr=test01
(Replace yourstore-name.com with your actual store URL)