Ingestly is a simple tool for ingesting beacons to Google BigQuery. Digital Marketers and Front-end Developers often want to measure user's activities on their service without limitations and/or sampling, in real-time, having ownership of data, within reasonable cost. There are huge variety of web analytics tools in the market but those tools are expensive, large footprint, less flexibility, fixed UI, and you will be forced to use SDKs including legacy technologies like
Ingestly is focusing on Data Ingestion from the front-end to Google BigQuery by leveraging Fastly's features. Also, Ingestly can be implemented seamlessly into your existing web site with in the same Fastly service, so you can own your analytics solution and ITP does not matter.
- Completely server-less. Fastly and Google manages all of your infrastructure for Ingestly. No maintenance resource required.
- Near real-time data in Google BigQuery. You can get the latest data in less than seconds just after user's activity.
- Fastest response time for beacons. The endpoint is Fastly's global edge nodes, no backend, response is HTTP 204 and SDK uses ASYNC request.
- Direct ingestion into Google BigQuery. You don't need to configure any complicated integrations, no need to export/import by batches.
- Easy to start. You can start using Ingestly within 2 minutes for free if you already have a trial account on Fastly and GCP.
- WebKit's ITP friendly. The endpoint issues 1st party cookie with secure flags.
Ingestly Endpoint must be in operation.
If you want to use the pre-build SDK, you can use files piblished in GitHub Releases.
If you wish to build the SDK by yourself, node.js is required.
The SDK uses a localStorage key and a Cookie for storing sub-domain specific ID.
Build the SDK
# Install required node_modules (only for build process. no dependencies.) npm install # ESLINT under ./src npm run lint # Build the SDK into ./dist npm run build
Install to your website
- Change configuration variables between line 7 and 33:
endpoint: a hostname of Ingestly Endpoint you provisioned.
apiKey: an API key for the endpoint. This value must be listed as
truein Fastly's Custom VCL for Ingestly.
eventName: the SDK dispatches a recurring event based on a timing of requestAnimationFrame. You can specify a name of this event.
eventFrequency: the recurring event is throttled by this interval in millisecond. Set a small number if you want to make the SDK sensitive.
prefix: used for defining a key name of localStorage and Cookie.
targetWindow: a property name of target window. you can use
- Save the file.
Place .js files
- Upload a core library
ingestly.jsand a config file
page_code.jsto your web site.
<script>tags into all pages like the below to fire Ingestly Tracking method.
<script src="./dist/ingestly.js"></script> <script src="./dist/page_code.js"></script>
You can enable optional tracking features.
Real User Monitoring
- You can measure the Real User Monitoring data which is the performance information based on timeline of page loading on each client.
Time-spent on a page (unload)
- Unload tracking set an eventListener to one of available events when the page is being unloaded.
- You can get an exact time that user spent during the specific pageview.
Clicks with data-trackable
- Click tracking is triggered if the clicked element (or its parent) has the specified
options.clicks.enableand adjust values:
||attribution name for identifying the target element|
- If you set
targetAttr, you need to add
data-trackableattribution to every element you want to track clicks.
- Ideally, every block elements should be structured like hierarchy. and each block element should have
data-trackablewith meaningful value.
- Scroll depth tracking for both fixed page and infinity scroll (lazy-load) page.
options.scroll.enableand adjust values:
||track the depth when the user stay at/over X percent/pixels for more than T seconds specified here|
||track the depth every X percent/pixels increased|
||for the fixed height page, you can use
- Read-Through Rate means is a metrics that describes how much range of content is consumed by an user.
options.read.enableand adjust values:
||track the depth of content when the user stay at/over X percent|
||track the rate every X percent increased|
||An array of elements. (nodeList or array) specify block elements to observed as a target of read-through.|
- Once you enabled this option, all media which is VIDEO or AUDIO will be tracked automatically.
- This option supports
enededevents plus the heart-beat.
options.media.enableand adjust values:
||the heart-beat tracker will be dispatched every X sec defined here|
- Basically, SDK uses a global namespace
- A custom event
ingestlyRecurringEvent(or your specified name in
config()) can be used for observing elements repeatedly.
- A method for configuration. See Configuration and Options section in this page.
- Initialization for the page.
- The method defines the page level variables such as page URL, title, referrer, etc...
- If your web site is SPA, you should call this method on each page update.
- A parameter
dataModelmust be an object. You can add custom variables if you define BigQuery's schema and Log Format for Fastly.
- Send a beacon for pageview event.
- You can pass the custom variables, or you can overwrite variables you passed at
Ingestly.trackAction(action, category, eventContext)
- Send a custom beacon on your preferred events.
- This method retrieves a value from GET parameter of URL by specifying a key name.
- If the URL does not have a key-value pair for specified key name, the method returns an empty string
- Note that this method does not parse the URL each time. An object containing the parsed key-value pairs based on URL is generated on
init(), and the method just returns the value from the object. So, if your SPA updates URL parameter, and you want to use it for measurement, you need to call
init()or do not use this method.