Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
@advanced-rest-client/app-analytics
Advanced tools
An element that support Google Analytics analysis
Event based component to support Google Analytics measurement protocol.
The component support both imperative and declarative API so it can be used in regular HTML template using your favourite templating engine and in JavaScript.
The appname
and trackingid
attributes (appName
and trackingId
properties respectively) are required parameters. Without it the element won't initialize a call to GA endpoint.
If clientid
attribute (clientId
property) is not set then it generates one automatically and store is in localStorage
. Note, that if current environment does not support localStorage
(like Chrome Apps) you need to provide this property manually or otherwise it will be regenerated each time the user opens the app.
Note, Google Analytics does not allow sending any information that may lead to a user.
Always give the user ability to disable tracking. Under EU laws you need to have permission from the user to store data on local device. To disable analytics simply remove the element from the DOM or set disabled
property.
Note, the disabled
state is persistent in localStorage
and automatically restored when element is initialized. If the environment does not support localStorage
you need to set this attribute manually each time the element is initialized.
You can directly call one of send*()
functions. See API Reference below for more info.
You can also use HTML events to send a hit. In this case dispatch a send-analytics
event with required type
property on the detail
object which describes what king of hit should be send. Possible values are: pageview
, screenview
, event
, social
, exception
or timing
.
Other parameters depends on the type.
screenview
hitconst event = new CustomEvent('send-analytics', {
bubbles: true,
composed: true,
detail: {
type: 'screenview',
name: 'Some scree name' // required
}
});
document.body.dispatchEvent(event);
event
hitconst event = new CustomEvent('send-analytics', {
bubbles: true,
composed: true,
detail: {
type: 'event',
category: 'Some category', // required.
action: 'Some action', // required.
label: 'Some label',
value: 123
}
});
document.body.dispatchEvent(event);
exception
hitconst event = new CustomEvent('send-analytics', {
bubbles: true,
composed: true,
detail: {
type: 'exception',
description: 'Exception description', // required.
fatal: true, // default false
}
});
document.body.dispatchEvent(event);
social
hitconst event = new CustomEvent('send-analytics', {
bubbles: true,
composed: true,
detail: {
type: 'social',
network: 'Facebook', // required.
action: 'Share', // required
target: 'https://www.shared.com/resource' // required
}
});
document.body.dispatchEvent(event);
timing
hitconst event = new CustomEvent('send-analytics', {
bubbles: true,
composed: true,
detail: {
type: 'timing',
category: 'Bootstrap', // required.
variable: 'databaseInitTime', // required
value: 123, // required
label: 'Optional label'
}
});
document.body.dispatchEvent(event);
Use <app-analytics-custom>
element as a child of <app-analytics>
to set custom properties. This metrics / dimensions will be used with every hit as long as this elements exists as a children of the <app-analytics>
element.
<app-analytics trackingid="UA-XXXXXXX">
<app-analytics-custom type="metric" index="1" value="5"></app-analytics-custom>
</app-analytics>
To send custom data with single hit only without creating <app-analytics-custom>
children, add customDimensions
or customMetrics
to the event detail object. Both objects must be an array of custom definition objects that includes index and value.
const event = new CustomEvent('send-analytics', {
bubbles: true,
composed: true,
detail: {
type: 'event',
category: 'Engagement',
action: 'Click',
label: 'Movie start',
customDimensions: [{
index: 1, // index of the custom dimension
value: 'Author name' // Value of the custom dimension
}]
}
});
document.body.dispatchEvent(event);
<script type="module" src="@advanced-rest-client/app-analytics/app-analytics.js"></script>
<script type="module" src="@advanced-rest-client/app-analytics/app-analytics-custom.js"></script>
<app-analytics trackingid="UA-XXXXXXX">
<app-analytics-custom type="metric" index="1" value="5"></app-analytics-custom>
</app-analytics>
import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/app-analytics/app-analytics.js';
import '@advanced-rest-client/app-analytics/app-analytics-custom.js';
class SampleElement extends LitElement {
render() {
return html`
<button @click="${this._handler}">Click with action</button>
<app-analytics trackingid="UA-XXXXXXX">
<app-analytics-custom type="metric" index="1" value="5"></app-analytics-custom>
</app-analytics>
`;
}
_handler(e) {
this.shadowRoot.querySelector('app-analytics').sendScreen('Main screen');
}
}
customElements.define('sample-element', SampleElement);
<app-analytics trackingid="UA-XXXXXXX">
<app-analytics-custom type="metric" index="1" value="5"></app-analytics-custom>
</app-analytics>
<script>
{
document..querySelector('app-analytics').sendScreen('Main screen');
}
</script>
aria-hidden
attribute.offline
property instead to enable queueing for events to be send when back online.git clone https://github.com/@advanced-rest-client/app-analytics
cd app-analytics
npm install
npm start
npm test
FAQs
An element that support Google Analytics analysis
The npm package @advanced-rest-client/app-analytics receives a total of 8 weekly downloads. As such, @advanced-rest-client/app-analytics popularity was classified as not popular.
We found that @advanced-rest-client/app-analytics demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.