Comments (2)
Here you are fellow angularites
Bypass the thin segment and heap docco and perhaps adapt this to your needs....
(this is for a Heap integrated through the Segment console impl.)
npm i @segment/analytics-next
npm i --save-dev @types/jquery
// cough
// see: https://developers.heap.io/reference/client-side-apis-overview
interface Heap {
track: (event: string, properties?: Object) => void;
identify: (identity: string) => void;
resetIdentity: () => void;
addUserProperties: (properties: Object) => void;
addEventProperties: (properties: Object) => void;
removeEventProperty: (property: string) => void;
clearEventProperties: () => void;
appid: string;
userId: string;
identity: string | null;
config: any;
loaded: boolean;
}
declare var window: { heap: Heap };
@Injectable()
export class SegmentAnalyticsService {
private analytics?: Analytics;
private context?: Context;
// use an APP_INITIALIZER
loadAnalytics = (): Promise<Analytics | undefined> => {
return new Promise<Analytics>((resolve) => {
AnalyticsBrowser.load({
writeKey: environment.segmentKey
})
.then((response: [Analytics, Context]) => {
this.analytics = response[0];
this.context = response[1];
this.analytics.ready().then((res) => {
console.log('ANALYTICS READY: ', this.analytics);
resolve(this.analytics);
});
})
.catch((e) => {
console.error('Error loading segment analytics');
resolve(undefined);
});
});
};
identify = (activeUser: ActiveUser) => {
this.analytics
.identify(activeUser.cognitoId, {
name: `${activeUser.forename} ${activeUser.surname}`,
email: activeUser.email
})
.then();
};
addMemberProperties = (activeMember: Member) => {
// utilized many dead-ends to get here...
// makes me wonder what the hell we actually need segment for
this.clearMemberProperties();
// a user can switch the organisation in context. we want to track activity by organisation - DO NOT use user traits for this
const properties = {
'Organisation Id': activeMember.organisationId,
'Organisation Name': activeMember.organisationName,
'Cloud Flavour': activeMember.cintraCloudFlavour,
'Roles': activeMember.roles?.join(', '),
'Messaging Enabled': activeMember.messagingEnabled.toString(),
'Groups Enabled': activeMember.groupsEnabled.toString()
};
window.heap.addEventProperties(properties);
};
clearMemberProperties = () => {
window.heap.clearEventProperties();
};
track = (event: string, payload: any) => this.analytics.track(event, payload).then();
logout = () => {
this.clearMemberProperties();
this.analytics.reset();
};
}
@Injectable()
export class MockSegmentAnalyticsService {
loadAnalytics = (): Promise<Analytics | undefined> => {
return new Promise<Analytics>((resolve) => {
resolve(undefined);
});
};
identify = (activeUser: ActiveUser) => {};
addMemberProperties = (activeMember: Member) => {};
clearMemberProperties = () => {};
track = (event: string, payload: any) => {};
logout = () => {};
}
/// core.module.ts
{
provide: SegmentAnalyticsService,
useClass: environment.analyticsDisabled ? MockSegmentAnalyticsService : SegmentAnalyticsService
},
`
from analytics-next.
Awesome! thanks for the example implementation. Angular not a 2nd class citizen for sure, we just don't have Angular expertise in house to write-up an example, so should rely on the community 🙌
... ( and we will fix the @types/jquery
type issue soon )
from analytics-next.
Related Issues (20)
- Can `.load()` support a symmetric key to not expose real write key? HOT 1
- analytics-node does not close HTTPS connection on closeAndFlush HOT 2
- Snippet version 5.2.0 loads analytics.min.js and analytics.classic.js at the same time HOT 1
- How to Set a Whitelist of Domains for a Segment JavaScript source WriteKey to Prevent Misuse? HOT 1
- Typescript issue on consent object of CoreExtraContext type HOT 1
- Analytics not flushed in Node >= 18 HOT 1
- Safari's Enhanced Tracking Protection Leads to Unhandled Promise Rejection HOT 11
- @segment/analytics-consent-wrapper-onetrust README code sandbox link looks incorrect HOT 1
- npm install fails for Node 18.XX and Node 20.XX HOT 1
- Cannot install package via NPM HOT 7
- Could not resolve "./lib/window-analytics-helper" when building with vite HOT 1
- Setting a low `flushInterval` effectively breaks `closeAndFlush()` HOT 2
- analytics.user function should be listed as optionally undefined in typescript definitions HOT 2
- Serve polyfill bundle from segment.com domain (for snippet/standalone users) HOT 6
- How to write an enrichment plugin that fires after a remote integration? HOT 4
- Serve polyfill bundle from segment.com domain (for snippet/standalone users) enhancement [test]
- Test
- In Jest: TypeError: analytics_next_1.AnalyticsBrowser is not a constructor HOT 1
- Support `exactOptionalPropertyTypes` in TypeScript HOT 4
- Vulnerability found
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from analytics-next.