Add input_amount to events #451

gianfra-t · 2025-02-05T18:42:01Z

Addresses #371 and #412

Changes

Adds the parameter input_amount to wallet_connect, amount_type and form_error events.
We use the current amount on the form for these events. For amount_type we need to delay a few seconds to avoid the amount to just be 0 or the default. If the interaction with the form is with the tokens, then the initial default amount will be sent.
For wallet_connect a new minimal storage is added, to avoid passing props to the context.
For Add network_selected parameter #412, we add the the network id to the event with parameter name network_selected.

Tag manager

Adds a new variable {{DLV | input_amount}} and link it to wallet_connect, amount_type and form_error.
Adds a new variable {{DLV | network_selected}}, and link it to wallet_connect.

Tested on the preview of tag manager and all events now register this new parameter.

netlify · 2025-02-05T18:42:28Z

✅ Deploy Preview for pendulum-pay ready!

Name	Link
🔨 Latest commit	`9ef4bde`
🔍 Latest deploy log	https://app.netlify.com/sites/pendulum-pay/deploys/67b741624576be000853eb19
😎 Deploy Preview	https://deploy-preview-451--pendulum-pay.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

…ount for amount_type event

gianfra-t · 2025-02-06T14:02:36Z

src/stores/formStore.ts

@@ -0,0 +1,37 @@
+import { create } from 'zustand';


@pendulum-chain/devs let me know if you like the addition of this state, if you prefer it to be more minimal (only fromAmount) or to avoid this altogether.

Although it adds extra code, I found it less confusing than passing fromAmount to the event context.

I'm fine with keeping it the way you implemented it 👍

…t-on-ga

ebma

Looks good overall 👍 I also checked the events in Google Tag Manager.

ebma · 2025-02-13T15:46:13Z

src/pages/swap/index.tsx

+            setTimeout(() => {
+              trackEvent({
+                event: 'amount_type',
+                input_amount: fromAmountRef.current ? fromAmountRef.current.toString() : '0',


Any reason we are using a ref, and especially using it only here? Alternatively, we could change the onChange prop of the AssetNumericInput component and pass teh new value in it. So you could access it right away. Here, you would then be able to do

onChange={(newValue: string) => { trackEvent({...}) }}

Well, the idea of the ref (and timeout) is because the onChange will always be triggered right on first modification. We need to wait, somehow, for the actual stable amount.

If we just send the event on change, the value registered will be always 0 or whatever default value is on the form as soon as the user started typing.

I think we will have the same issue on the AssetNumericInput. The other alternative I can think of, is to track it when the output is stable, here. Seems more cumbersome.

So the ref is just used in order not to track the first (prefilled) amount?

Yes, it is to store the value. I tried using the "current" fromAmount value at the time of the first onChange, but the timeout function will take the value as soon as it is triggered (the initial one), which will be again the default.

Since the ref updates from the useEffect above, at the moment of triggering the event, it will read the last value typed.

I pushed a new commit with a suggested change. I thought it might be easier to show an alternative approach instead of describing it. What do you think about using the ref only for tracking if the user touched the field but then debounce the actual value to avoid tracking too many amounts?

I also learned that useDeferredValue is not necessarily suited to debounce values like for user amounts as the timeout is not configurable.

I saw you replaced the ref and timeout with a debounced value. Did it worked? Because I think this would send the current debouncedValueat the moment of the first onChange triggering.

Because here, since fromAmountFieldTouched is a dependency, it would execute the effect right away.

Yes useDeferred was a loose import.

I fixed that by adding another statement to the effect hook. I also removed the amount_type event from the list of unique events. Everything seems to work as expected now.

So we will capture all user quotes? Makes sense, only we will be flooded by events. But I suppose GA can handle such things.

I personally understood that the valuable outcome of this change is that marketing is able to see all amounts that the user tried. If it's just about the final amount, we can check the input amount on the other events after all. So yes, 'flooding' would be intended I think.

All good then!

src/pages/swap/index.tsx

ebma · 2025-02-13T15:48:39Z

src/stores/formStore.ts

@@ -0,0 +1,37 @@
+import { create } from 'zustand';


I'm fine with keeping it the way you implemented it 👍

…t-on-ga

add input_amount to events

3c5dbae

gianfra-t linked an issue Feb 5, 2025 that may be closed by this pull request

Add parameter to the amount_type event on GA #371

Closed

gianfra-t marked this pull request as ready for review February 5, 2025 18:43

gianfra-t changed the title ~~Add input_amount to events~~ [IN-PROGRESS] Add input_amount to events Feb 5, 2025

new form state, add input_amount to wallet event, used delayed fromAm…

977f579

…ount for amount_type event

gianfra-t changed the title ~~[IN-PROGRESS] Add input_amount to events~~ Add input_amount to events Feb 6, 2025

gianfra-t commented Feb 6, 2025

View reviewed changes

gianfra-t requested a review from a team February 6, 2025 14:02

gianfra-t added 2 commits February 6, 2025 15:38

send network id along with wallet_connect event

af08900

Merge branch 'staging' into 371-add-parameter-to-the-amount_type-even…

7c32c67

…t-on-ga

ebma reviewed Feb 13, 2025

View reviewed changes

ebma and others added 9 commits February 18, 2025 16:37

Change logic for amount type tracking

ae6ac85

Merge branch 'staging' into 371-add-parameter-to-the-amount_type-even…

b78eea7

…t-on-ga

fix some lint issues

be59e14

fix type

6c4efe2

Remove amount_type event from list of unique events

515ddc7

Fix bug reintroduced by merge

80262d5

Fix some lint warnings

66b1eed

Merge branch 'staging' into 371-add-parameter-to-the-amount_type-even…

02eb487

…t-on-ga

Prevent tracking of default fromAmount

9ef4bde

ebma approved these changes Feb 20, 2025

View reviewed changes

ebma merged commit 08efc18 into staging Feb 20, 2025
4 of 5 checks passed

ebma deleted the 371-add-parameter-to-the-amount_type-event-on-ga branch February 20, 2025 16:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add input_amount to events #451

Add input_amount to events #451

gianfra-t commented Feb 5, 2025 •

edited

Loading

netlify bot commented Feb 5, 2025 •

edited

Loading

gianfra-t Feb 6, 2025

ebma Feb 13, 2025

ebma left a comment

ebma Feb 13, 2025

gianfra-t Feb 17, 2025

ebma Feb 17, 2025

gianfra-t Feb 17, 2025

ebma Feb 18, 2025

gianfra-t Feb 19, 2025

ebma Feb 20, 2025

gianfra-t Feb 20, 2025

ebma Feb 20, 2025

gianfra-t Feb 20, 2025

ebma Feb 13, 2025

Add input_amount to events #451

Add input_amount to events #451

Conversation

gianfra-t commented Feb 5, 2025 • edited Loading

Changes

Tag manager

netlify bot commented Feb 5, 2025 • edited Loading

✅ Deploy Preview for pendulum-pay ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ebma left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gianfra-t commented Feb 5, 2025 •

edited

Loading

netlify bot commented Feb 5, 2025 •

edited

Loading