Integrate google analytics query into the prototype

[prayagd]

Context

We need to implement event tracking on Vortex PMF prototype to enable data collection via Google Tag Manager (GTM) and Google Analytics. Code template to create and push events to the data layer for the specified list of events was provided:

document.getElementByID("ID").addEventListener('click', function(){
    dataLayer.push({
      'event': 'eventName', //such as select_vault_manually
      'label': 'vaultID', // use actual vaultID
  });
})

Requirements

• [ ] add the code to the events described in the document

Note

Header code

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-T8JZSLD8');</script>
<!-- End Google Tag Manager -->

Footer Code:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T8JZSLD8"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

[TorstenStueber]

What do we want to measure? I don't think that we just want to integrate Google Analytics and leave it at that. Are there particular events we are interested in to define some kind of funnel?

[vadaynujra]

Quite a few @TorstenStueber could also be something we work on with the Marketing team (have some experience with Google tag manager),

[vadaynujra]

@annatekl think we will need to identify any of the KPIs that will require tech input, vs the ones that can be tracked using Google Analytics type tool.

[annatekl]

@prayagd can you please help me in adding the correct Epic here?

[annatekl]

Hey team! Please add your planning poker estimate with Zenhub @ebma @Sharqiewicz

[ebma]

I honestly don't have a clue how to implement this as I've never used GTM or Google Analytics before. @pendulum-chain/product do you have more context available? Even just a link to the relevant documentation would be helpful. IIRC you mentioned some time ago that some external person would help us out with this, how did that go?

[annatekl]

@Sharqiewicz Can you help here, as you said you have experience with this implementation and for you the implementation is clear with the information provided by an external developer? Is there something missing?

[vadaynujra]

Inputs received from external developer:

Header code:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-T8JZSLD8');</script>
<!-- End Google Tag Manager -->

Footer Code:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T8JZSLD8"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

[prayagd]

Ticket updated with header code and footer code

[TorstenStueber]

@pendulum-chain/product some of the conditions in the document are not clear to me.

For example, there is are the following items:

• users engaging with number (amount_type) without clicking details (no_click_details)
• bank_transfer_details_input with drop_off_incomplete: track the number of people that drop off and don't fill the form completely
• etc

That means that this ticket goes beyond simple tracking of events but requires more logic and actually means that we need to generate negative tracking events, i.e., if something did not happen. Such events can only be generated if we implement extra logic to handle the case where the user leaves the page and send some of these negative events indicating that some action did not happen. This is unreliable and more requires more logic.

Setting up such kind of logic should be possible to do inside the Google Analytics console (i.e., analyze the section of users that did not trigger a specific event) so that we don't need to add this complexity to our code.

How is this intended to be done?

[vadaynujra]

@prayagd @annatekl could you update the ticket with the details in the previous comment?

[TorstenStueber]

I think we should first clarify the intentions of the specification in the pdf by its author.

[annatekl]

@TorstenStueber what is the pdf you mean? this docs right docs ?

[TorstenStueber]

Yes, I mean the doc, sorry.

[annatekl]

• users engaging with number (amount_type) without clicking details (no_click_details) Direct Tracking of Tab Closure: Not possible without custom code due to browser restrictions.

this can be setup in GTM itself Using a Timer Trigger:

A Timer Trigger can be used to monitor how long users stay on a page. - one option to solve the problem.

[TorstenStueber]

Okay, good. I don't see this as the responsibility of tech, any setting inside GTM and GA should be done by marketing.

Thus, I will only trigger events that should be sufficient to extract the information required and will document this here.

[annatekl]

• bank_transfer_details_input with drop_off_incomplete: track the number of people that drop off and don't fill the form completely we don't need to track it now but for future if we need to, we have Google analytics, where you can set up an event tag with parameters like form_status to indicate completion.

[annatekl]

Okay, good. I don't see this as the responsibility of tech, any setting inside GTM and GA should be done by marketing. Yes it will be set up by us/marketing Thus, I will only trigger events that should be sufficient to extract the information required and will document this here. - agree, i will only need to review the docs as we don't need to track all evens (for example banking details for now)

[TorstenStueber]

I would appreciate if there is a clearer distinction inside the docs between a) raw events that the we should generate in the website and b) any kind of data extraction happening purely inside GTM and GA.

If this cannot be provided, I will take a best guess and document it.

[annatekl]

ok @TorstenStueber i will work on this today and split it in a way that is clear, I will let you know once completed

[annatekl]

updated document, i will review it with the team tomorrow

[TorstenStueber]

I will now track the following events:

• event amount_type: sent when user edits the "from amount" field for the first time
• event click_details: sent when user clicks on details for the first time
• event wallet_connect
  • with parameter wallet_action = "connect": sent whenever user connects wallet successfully
  • with parameter wallet_action = "error": sent whenever there is an error connecting to the wallet
  • with parameter wallet_action = "disconnect": sent whenever the user disconnects the wallet
• event transaction_confirmation, whenever the user submits the offramp form
  • with parameter from_asset, which is either "USDC" or "USDC.e"
  • with parameter to_asset, which is either "EURC" or "BRL"
  • with parameter from_amount, which is the from amount
  • with parameter to_amount, which is the to amount
• event kyc_completed, whenever the user submits the offramp form
  • with parameter from_asset, which is either "USDC" or "USDC.e"
  • with parameter to_asset, which is either "EURC" or "BRL"
  • with parameter from_amount, which is the from amount
  • with parameter to_amount, which is the to amount
• event transaction_success: sent whenever a complete transaction flow has been successful
  • with parameter from_asset, which is either "USDC" or "USDC.e"
  • with parameter to_asset, which is either "EURC" or "BRL"
  • with parameter from_amount, which is the from amount
  • with parameter to_amount, which is the to amount
• event transaction_failure: sent whenever a complete transaction flow has been successful
  • with parameter from_asset, which is either "USDC" or "USDC.e"
  • with parameter to_asset, which is either "EURC" or "BRL"
  • with parameter from_amount, which is the from amount
  • with parameter to_amount, which is the to amount
• event click_support: sent when the user clicks on the support button on the success or failure screens for the first time
  • with parameter transaction_status: either "success" or "failure"

@annatekl can you check whether this makes sense for you? I took liberty to adapt the definition (e.g., change some of the event or parameter names) to make it more consistent.

Edit: I am currently not tracking that last event click_support because no click logic for the support has been implemented yet.

[annatekl]

looks good

[ebma]

@pendulum-chain/product this feature is now live on the staging deployment. Can you confirm that the analytics are visible as expected? If it is, please close this ticket.

[TorstenStueber]

Why is this ticket not auto closed when the PR has been merged? First it is linked to this issue and then I even write "Closes #46" in the PR description.

[ebma]

It's been like this for all tickets we merge into polygon-prototype-staging. I guess it's because they are not merged to main.

[TorstenStueber]

This ticket has been completed. I will close it.