Offset Analytics

Element for integrating Offset Analytics into your website.

npm install offset-analytics

import "offset-analytics";

<offset-analytics event="PageView" data='{ "moreInfo": 1234 }'></offset-analytics>

<a
    href="/favorite/1234"
    data-offset-analytics="click:AddToFavorites"
    data-offset-analytics-data='<?php echo json_encode(array("customerId" => 123, "sku" => "123")); ?>'
>Add To Favorite</a>

Limit to a specific platform

This will only send this event to google if configured. Platforms available are: google, facebook, amplitude.

<offset-analytics event="loginStatus" data='logged out' platform="google"></offset-analytics>

Customize Events

window.OFFSET = Object.assign(window.OFFSET || {}, {
	customizeAnalytics: function ({ event, data, platform }) {
        if (event === "MyEvent") {
            // Dynamically customize events
            return {
                event: "CustomizedEvent",
                data,
            };
        }
        // Return false to cancel the event from being sent
        // Such as stopping all events being sent to Amplitude
        if (platform === "amplitude") {
            return false;
        }
    },
});

Standard Events

| Event Name | Facebook | Google | Amplitude | Plausible | | ---------------------- | ---------------------- | ------------------ | ------------------- | ---------------------- | | AddToCart | AddToCart | add_to_cart | Add To Cart | AddToCart | | CompleteRegistration | CompleteRegistration | sign_up | Register | CompleteRegistration | | CustomizeProduct | CustomizeProduct | ? | ? | CustomizeProduct | | InitiateCheckout | InitiateCheckout | begin_checkout | Initiate Checkout | InitiateCheckout | | PageView | PageView | pageview | Page View | PageView | | Purchase | Purchase | purchase | Order Placed | Purchase | | RemoveFromCart | RemoveFromCart | remove_from_cart | Remove From Cart | RemoveFromCart | | ViewCart | ViewCart | view_cart | View Cart | ViewCart | | ViewItem | ViewContent | view_item | View Item | ViewItem | | ViewItemList | ViewItemList | view_item_list | View Item List | ViewItemList |

Developer Usage

• pnpm install
• pnpm run dev
• Visit http://localhost:5173