electerious / ackee-tracker Goto Github PK
View Code? Open in Web Editor NEWTransfer data to Ackee.
License: MIT License
Transfer data to Ackee.
License: MIT License
After a few minutes of opening the HTML file(http://localhost:52330/demos/create.html), the browser reports an error:
ackee-tracker.min.js:1
PATCH http://localhost:3000/domains/2faa8c83-a45c-42a9-8bb3-188492b2ab97/records/f23f257f-845e-4f9b-bd2d-285ab829cbc0 net::ERR_NETWORK_IO_SUSPENDED
It might be useful to add the following code:
xhr.timeout = 6000;
I can't shake this error :
TypeError: instance.action is not a function. (In 'instance.action('...', {
key: 'click',
value: 1
})', 'instance.action' is undefined)
My code is
const instance = ackeeTracker.create('https://myservercom').record('...',
undefined, (recordId) => {
console.log(`Created new record with id '${ recordId }'`)
})
document.querySelector('#subscribe').addEventListener('click', () => {
console.log("subscribe");
instance.action('...', {
key: 'click',
value: 1
})
})
I'm authoring a blog and would like to exclude tracking authors/site administrators when they access the website. The IPs from which they access the site are well known, so an option to exclude a list of IPs from tracking would be nice.
Currently when ignoreLocalhost
is set to false, there is a single console.warn
message but no other info for troubleshooting your app. When you are new to Ackee or using it a new framework or pattern, it would be nice if you could get some indication of what would have been tracked. For example, you could console.info
something like:
ackee record <domainId> - <recordId>
ackee record update - <recordId>
ackee action <key> - <recordId>
ackee action update - <recordId>
(unsure if the updates should be logged, but seems right at least for actions whose updates will be manually driven)
Would you accept a PR adding functionality along these lines? If so, design questions follow.
What is your preferred API for this?
ignoreLocalhost: true | false | 'log'
(most straightforward)ignoreLocalhostBehavior: 'log' | 'silent'
or logOnIgnoreLocalhost: true | false
etc (or verbose: true | false
which could be independent from ignore if people want this in prod for some reason)Would you prefer updates be logged? Or just creates? Configurable (logOnIgnoreLocalhost: 'create' | 'all' | false
)?
Would you prefer the logging instance augment all of the standard behavior? Maybe something like
// new function with same API as send
const log = function(url, body, options, next) {
// probably inspect body.variables to determine what mutation type is happening, though could also parse query string
}
export const create = function(server, options) {
// added to body of create and replaces existing direct calls to `send` in this function
const _send = options.ignoreLocalhost === 'log' ? log : send;
...
I think this is probably the right path forward for best simulation, and it means calls to stop
don't need to be logged since the intervals will just stop happening.
This would also be useful in something like electerious/use-ackee#10.
Hi,
I just installed Ackee, and it is wonderful, simple and direct to the point.
However, I cannot get device data, browser and other related data. I am getting this message:
There is either no data available or collecting detailed data is disabled in ackee-tracker.
How can I enable device and browser data analytics?
Best,
Hamza
<script async src="https://ackee.example.com/tracker.js" data-ackee-server="https://ackee.example.com" data-ackee-domain-id="hd11f820-68a1-11e6-8047-79c0c2d9bce0"></script>
"domainId {String} Id of the domain." extract from the doc but none steps to have it ...
src => ok
data-ackee-server => ok
data-ackee-domain-id => ???
How to create it (data-ackee-domain-id) ? can I fill random string myself ?
Can we have something to post some meta data for example
currentLoggedInUsers
Windows (for modal popups in the App)
Hello,
I am trying to lock down my instance using Cloudflare Access and they utilize zero-trust access management meaning that all URLs require additional authentication by default, so I am wondering what API URL(s) I need to whitelist so users can still report data, while keeping the admin panel protected.
Edit: I wanted to note that I already have /tracker.js whitelisted, I am talking about the API endpoints that are posted to using the tracker.js script.
Thanks!
I need some help with debugging.
Server is running on Netlify + MongoDB Atlas
When testing, I can see the tracking calls going out:
{
"query":"\n\t\t\tmutation createRecord($domainId: ID!, $input: CreateRecordInput!) {\n\t\t\t\tcreateRecord(domainId: $domainId, input: $input) {\n\t\t\t\t\tpayload {\n\t\t\t\t\t\tid\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t",
"variables":{
"domainId":"2a97e286-d2ca-4755-afb6-1addeac283e8",
"input":{
"siteLocation":"http://localhost:3000/",
"siteReferrer":""
}
}
}
but nothing is written to the DB. The Netlify log shows /api function is called but doesn't provide any other useful info
API response is:
{
"data": {
"createRecord": {
"payload": {
"id": "88888888-8888-8888-8888-888888888888"
}
}
}
}
Note:
"domainId":"2a97e286-d2ca-4755-afb6-1addeac283e8"
is correct. Also i've set
ignoreLocalhost: false,
The Firefox console notifies me that:
Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.
It also says that the problem is at 1:15966
, aka the 15,966th character in the script.
It is correct, as I was able to see repainting occur, where the style loaded once incorrectly, and then was corrected. This doesn't happen when I remove the script, but occurs no matter where I place it, at the bottom, at the top, without async
, with defer
, etc.
I have a use case where I expect that users may reload the webpage but I would like to treat all of their time spent across multiple tab reloads as part of the same visit.
Would it be possible to expose an ID on the instance that could be saved to localStorage and set on a new instance if the page is reloaded?
Hey
I had added the js code inside my head tag but coudn;t get the analytics data.
Why the API's could not work?
The idea here is to add opt-in functionality for automating the record
functionality. My thought is that we could add a .watch()
method that would...
.record()
function to initialise the recordpopstate
, calling .record()
if the path has changedThe docs for this method would look something like this...
Initialises a record and keeps it up-to-date when popstate
events occur.
Examples:
instance.watch('https://ackee.example.com', {
detailed: false,
ignoreLocalhost: true,
}, {
immediate: false,
})
Parameters:
domainId
{String}
Id of the domain.attributes
{?Object}
Attributes that should be transferred to the server. Will be ackeeTracker.attributes()
unless specified otherwise.config
{?Object}
Configuration for the watcher.
config.immediate
{?Boolean}
Whether or not to call .record()
immediately. If false
, instance.record()
must be called before instance.watch()
to ensure the initial page is tracked. Defaults to true
.When adding ackee-tracker using Next.js and there is client-side routing I could see that the POST request sent doesn't use the current URL in the browser, but instead, the first page the user entered.
I will try to make a PR that fixes this issue.
Hi there 👋
Great work on ackee, I started to use it for NuxtJS examples.
We encountered one issue today on our first example: https://xr8nr.sse.codesandbox.io
We have a CORS error, and it seems that no HOST is sent:
When we setup the ACKEE_ALLOW_ORIGIN
to "https://xr8nr.sse.codesandbox.io"
on our Heroku (https://nuxt-ackee.herokuapp.com), we had a CORS error, so we set it to *
.
When looking at the request headers on Chrome, we have the wrong host
header:
So it fails directly here: https://github.com/electerious/Ackee/blob/master/src/server.js#L56
Any idea about what we can do wrongly?
Also, we created a nuxt-ackee module ✨
Does the tracker record bots that are visiting the site? If so, is there a way to filter that out other than directly manipulating the DB?
It would be great to manually set an option per website to disable interval PATCH pinging with the rest of the options in data-ackee-opts attribute.
As I understand time spent on site is not yet displayed on Ackee's frontend and some people may not need this functionality.
Why is the parsing of the UA done on the client side, and not the server side?
You could potentially save 15kB (~8kB gzip). It's not much, but it can be done server side.
Some systems report only the system without a version number. In this case you can only see these systems in the statistics, when you use the "hide system version" button.
It would be great if these were also shown just without a version number, in between the other entries with a version number.
I know there's an ignoreLocalhost
option but I develop using docker behind a reverse proxy so my sites have real URLs in development. It would be cool to have an option to just disable to the tracker so I could do something like
disable: process.env.ENV === 'prod' ? false : true
Or the inverse to enable it. Or maybe I'm missing something somewhere and you can totally do this already some other way.
Hello.
I'm building server side rendered apps with Next.js. My logs get filled with: "Ackee is not executing automatically because you are using it in an environment without a window
object'". It would be great if this was removed or only logged once.
Thanks
ackee-tracker/src/scripts/main.js
Line 271 in 0d8034b
Hi,
I just finished the setup of the server, everything works fine when I try Ackee with the <script> but with ackee-tracker I get an error. I tried removing parameters but no matter what I do, it still crashes when I call .record()
Here's a photo:
And the code
const instance = ackeeTracker.create({
server: 'https://ackee.gawlik.io',
domainId: 'acf48a42-b795-4202-834d-e23531572138',
});
instance.record({
siteLocation: window.location.href,
siteReferrer: document.referrer,
});
Maybe it's stupid, but I really couldn't find the solution,
Anyway, thanks for this great tracker 👍
In the installation docs, you mention that "We recommend installing ackee-tracker using npm or yarn.".
Though I do see an advantage of doing this, which is to remove the need of having a script tag as the code will be embedded in your pages (also bypasses ACKEE_TRACKER, I am worried that the drawback is you have to make sure your version of the tracker is aligned with that of the server, which is something you don't have to worry about when you reference the script from your server (assuming they are natively in sync).
So, I was wondering whether it's recommended to use an embedded version or generally better to use a script. In any case, it might be a good idea to mention in the readme that if you embed the code, you'll have to manually ensure your tracker is in line with your server.
That said, I don't think mis-alignment will happen often. But when it does, you'll have to re-deploy all your site.
Hi @electerious, would you be open to moving the type definitions from DefinitelyTyped into this repo? It seems like it would be easier to keep them in sync.
(Currently the type definition for instance.record
is missing the callback
)
I'm trying to add Ackee tracker to my Gatsby project, without using the gatsby plugin as it seems out of date.
In my understanding, you should
.stop()
the previous record, if anyI've implemented this pattern, but unfortunately my "Active visitors" count is increased on each page change, even though I can confirm that there only a single instance of Ackee tracker created.
Here is my gatsby-browser.js
:
import React from "react"
import { Ackee } from './src/hooks/use-analytics';
export const wrapRootElement = ({ element }) => (
<Ackee>{element}</Ackee>
)
and use-analytics.js
:
import React, { createContext, useContext, useEffect, useState } from 'react';
import * as ackeeTracker from 'ackee-tracker';
const AckeeContext = createContext(undefined);
export const useAckee = () => useContext(AckeeContext);
export function Ackee(props) {
const [ackee] = useState(
process.env.GATSBY_ACKEE_SERVER && process.env.GATSBY_ACKEE_DOMAIN_ID ? ackeeTracker.create({
server: process.env.GATSBY_ACKEE_SERVER,
domainId: process.env.GATSBY_ACKEE_DOMAIN_ID,
}, {
ignoreLocalhost: process.env.GATSBY_ACKEE_IGNORE_LOCALHOST !== 'false',
detailed: process.env.GATSBY_ACKEE_DETAILED !== 'false',
}) : undefined,
);
const [record, setRecord] = useState();
const navigate = (path) => {
if (record) {
record.stop();
}
if (ackee) {
setRecord(ackee.record({
siteLocation: `${window.location.origin}${path}`,
}));
}
};
useEffect(() => {
// first record
if (ackee) {
setRecord(ackee.record());
}
return () => {
if (record) {
record.stop();
}
}
}, [ackee]);
return (
<AckeeContext.Provider value={navigate} {...props}/>
)
}
In my app, in my side nav component, I do this:
...
const pathChange = useAckee();
const onClick = () => pathChange(path);
...
This works very well:
But, my Active visitor counter is not correct.
Any idea ?
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.
Hey :) I just wanted to ask if there is any plan on supporting typescript (e.g. shipping / publishing types) natively? There's already a @types/ackee-tracker
with third-party types...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.