Solved

How can we use heap.identify in React TypeScript project

D
Userlevel 1

We need an npm package and types defined in order for us to use heap in the app on the authentication page.

I couldn’t find any articles on how to use heap.identify method in a React app that is built using TypeScript.

Any pointers will be helpful. Thanks.

icon

Best answer by DanishMentorange 18 February 2023, 21:21

View original

12 replies

D
Userlevel 1

Any response on the above question?

julia
Rank
Userlevel 3
Badge +3

Any response on the above question?

Hi Danish, our Solutions Engineering team has seen your question and they'll circle back here to post an answer for you as soon as possible.

N
Rank
Userlevel 3
Badge +2

Hey there!

We have a set of TypeScript Type Definitions in documented here. Sorry that wasn’t easy to find. Heap.js does not come as an NPM package just yet. I will go ahead and upvote the feature request for that functionality! 

Let me know if you’re looking for anything else! 

 

EDIT: to clarify, you call the identify method with TypeScript the same way you would in JavaScript [docs here]:

 

D
Userlevel 1

We tried the way you described it but the info you provided wasn’t complete for TypeScript. So here is what we did.

  1. Created a .d.ts file with Heap interface (IHeap) and defined a variable as follows: declare var heap: IHeap
  2. In the successful login code, we used the following code: heap.identify(userEmail);
  3. And in our landing page we added following code: heap.addUserProperties({ Name: user.name });

We do not get any errors; but the identify does not seem to work. The addUserProperties on the other hand works. When we go to “Users & Sessions” tab we see all users as unidentified.

Are we missing anything?

D
Userlevel 1

Any response to the above post?

julia
Rank
Userlevel 3
Badge +3

Hi @DanishMentorange, your questions have reached the level of specificity where we recommend 1:1 assistance. If you're interested in upgrading your Heap plan to have phone support, I'm happy to connect you with the right person to discuss that.

D
Userlevel 1

I dont understand why do you state it is specific to us. My question is how do we use heap.identity function in a TypeScript project. The answer you provided is not correct and does not work with TypeScript.

N
Rank
Userlevel 3
Badge +2

Hey @DanishMentorange really sorry for the delay here. You set up Heap correctly and are calling the Heap APIs correctly—we have identity and user property data captured from your tests.

 

The issue was instead due to an issue on our side. You can learn more on our status page report here: https://status.heap.io/incidents/rlmjss9jx204. It should be resolved now, and you should be able to see the Identity and Name properties in Heap. 

C

Hey @Nora-Heap are there any updates on this, even with @DanishMentorange ‘s explanation I find it quite hard to believe there is no easy way to call heap.identify() from a react app. 

D
Userlevel 1

@cmiljkovic you have to create a local heap.d.ts file with these definitions and it works.

declare var heap: IHeap;

interface IHeap {
    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;
}

and use it like below (no imports needed)

heap.identify(email);

N
Rank
Userlevel 3
Badge +2

Thanks @DanishMentorange!!! 🙌

C

@cmiljkovic you have to create a local heap.d.ts file with these definitions and it works.

declare var heap: IHeap;

interface IHeap {
    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;
}

and use it like below (no imports needed)

heap.identify(email);

Thank you!

Reply


Terms & ConditionsCookie settings