mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
Initial commit
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
15
library/modules/google-analytics/README.md
Normal file
15
library/modules/google-analytics/README.md
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Google Analytics Module
|
||||
hide_title: true
|
||||
---
|
||||
# Google Analytics Module
|
||||
|
||||
This module allows you to track user interactions with your Noodl app, using Google Analytics.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Follow the [Setting up Google Analytics](/library/modules/google-analytics/guides/setting-up-google-analytics/) guide or jump straight to the [node documentation](/library/modules/google-analytics/nodes/google-analytics-root/).
|
||||
@@ -0,0 +1,112 @@
|
||||
---
|
||||
title: Setting up Google Analytics
|
||||
hide_title: true
|
||||
---
|
||||
# Setting up Google Analytics
|
||||
|
||||
## What you will learn in this guide
|
||||
|
||||
This guide will show you how to add basic tracking with Google Analytics. After this guide you will be able to collect data on how many users that see your app, some of their behaviors and how they move through your application.
|
||||
|
||||
## Overview
|
||||
|
||||
We will go through the following topics:
|
||||
|
||||
- Beginners guide to Google Analytics
|
||||
- Set up Google Analytics
|
||||
- Set up the Noodl Module
|
||||
- Allow tracking
|
||||
- Next steps
|
||||
|
||||
## Beginners guide to Google Analytics
|
||||
|
||||
If you're already familiar with _impressions_ and _page views_ and just want to set up your tracking, feel free to jump along to [the next section](/library/modules/google-analytics/guides/setting-up-google-analytics).
|
||||
|
||||
If tracking in Google Analytics is new to you, keep reading for a quick crash course.
|
||||
|
||||
The most common things to track with Google Analytics are _visitor count_ and _page views_. These are coincidentally two of the metrics that Google Analytics track by default without you having to take any other action than just starting the tracking script in your app.
|
||||
|
||||
The user data lets you know how many people visit your app. It also include a lot of helpful information on the visiting demographics and what technologies they use to access your app. What is the average length of the users visit? What part of the world are they from? What languages do they speak? Are they primarily desktop or mobile users? All of this, and much more can be answered by reading the collected data.
|
||||
|
||||
While the demographic data is good for tracking general behavior, page views can be used to see details on specific interaction. What are the most visited pages? On what page do your users spend the most time? Are they reaching that last step of the form, or do they drop off earlier? Where do they drop off?
|
||||
|
||||
It is well worth learning more about [finding your way around Google Analytics](https://support.google.com/analytics/answer/9367631), and especially the contents and capabilities of [GA4 Reports](https://support.google.com/analytics/answer/9212670), as they are the backbone of Google Analytics and an instrumental tool in shaping the success of your app.
|
||||
|
||||
## Set up Google Analytics
|
||||
|
||||
To be able to use Google Analytics you need to have:
|
||||
|
||||
1. an Analytics account with a _Google Analytics 4 (GA4)_ **Property**
|
||||
2. with a _Web_ **Data Stream**
|
||||
3. pointing to the deployed app URL (or a placeholder one, like `example.com`)
|
||||
4. with _Enhanced Measurement_ **disabled**
|
||||
|
||||
If this list is crystal clear, you already know how to do this and can skip along to the [next section](/library/modules/google-analytics/guides/setting-up-google-analytics#setting-up-the-noodl-module) of this guide. Otherwise - Google has some handy documentation:
|
||||
|
||||
### Setting up your Google account
|
||||
|
||||
If you don't already have a Google Analytics account you need to [create one](https://support.google.com/analytics/answer/9304153#account&zippy=%2Cweb).
|
||||
|
||||
After that we need to [set up a **Property**](https://support.google.com/analytics/answer/9304153#property&zippy=%2Cweb), which is Google terminology for "a collection of **Data Streams** that you want to track".
|
||||
|
||||
:::caution
|
||||
Make sure that you are using _Google Analytics 4_ and **NOT** _Universal Analytics_, as this Module only supports _GA4_.
|
||||
:::
|
||||
|
||||
So what is a **Data Stream**? Simply put, it's a connection that will stream data from your app to Google Analytics. You can have multiple **Data Streams** in your **Property**, but in most cases you will only need one.
|
||||
|
||||
Let's set up our first **Data Stream**. As Noodl outputs Web Apps, we will need to select the [**Web** option](https://support.google.com/analytics/answer/9304153#stream&zippy=%2Cweb). When asked for the URL of the primary website, this needs to be the URL for your app [when it's deployed](/docs/guides/deploy/deploying-an-app-on-sandbox). `example.com` works for testing purposes as well.
|
||||
|
||||
!> Make sure to disable [_Enhanced Measurement_](https://support.google.com/analytics/answer/9216061), as this might send double page views.
|
||||
|
||||
## Seting up the Noodl Module
|
||||
|
||||
In the Google Analytics admin panel, go to your newly created **Data Stream** settings and copy the [Measurement ID](https://support.google.com/analytics/answer/9539598#find-G-ID). You will be needing this later.
|
||||
|
||||
Open up your Noodl Project and locate your **Root Component**. It's easy to identify, since it has a small house icon in front of it and is called `App` (if you haven't renamed it).
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Create a `Google Analytics Root` node and place it in the visual tree, as high up as you can, then paste the **Measurement ID** that you copied earlier into the `Measurement ID` input in the **Property Panel**.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Allow tracking
|
||||
|
||||
To be able to track anything we need to check the <span className="ndl-data">Allow Tracking</span> input. This can be done by simply checking the input in the **Property Panel**.
|
||||
|
||||
In most cases it is recommended that you notify the user of your tracking and only track after having been given the users consent.
|
||||
|
||||
To do this we can use a **Button** node and a **Switch** node. Connect the **Switch** nodes <span className="ndl-data">Current State</span> output to the <span className="ndl-data">Allow Tracking</span> input on the **Google Analytics Root** node. Use the **Button** nodes <span className="ndl-signal">Click</span> output to flip the **Switch** to `On`.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
This will initiate the tracking when the user clicks the button.
|
||||
|
||||
To make sure that everything is correct, we can use the <span className="ndl-signal">Starting Tracking</span> output on the **Google Analytics Root** node. This will send a <span className="ndl-signal">signal</span> when the Google Analytics tracking code has been activated. This <span className="ndl-signal">signal</span> can also be used to hide the button after consent has been given. Simply use the same "flip the switch" trick we did above, but setting the **Switch** initial state to `On` (letting the **Button** flip the switch to `Off`) and connecting the <span className="ndl-data">Current State</span> output to the <span className="ndl-data">Mounted</span> input on the **Button**.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Next steps
|
||||
|
||||
Congratulations! The Google Analytics integration is complete! You should now be able to see stored and real time data in your [Google Analytics Reports](https://support.google.com/analytics/answer/9212670) view.
|
||||
|
||||
Google Analytics is very powerful and has a lot of features, and it's highly recommended to learn more about it if you're just starting your Analytics journey. Sadly, we've reached the end of this guide, but there are many resources where you can learn more about GA4. Google themselves provide free online courses in the [Analytics Academy](https://analytics.google.com/analytics/academy/) that are well worth checking out if you want to learn all the ins and outs of both the tool and tracking strategies. Less in-depth information is also available - one Google (or YouTube) search away.
|
||||
|
||||
When you feel it's time to go further on your tracking journey in Noodl, check out our guide on [tracking custom events](/library/modules/google-analytics/guides/tracking-custom-events/).
|
||||
@@ -0,0 +1,96 @@
|
||||
---
|
||||
title: Tracking Custom Events in Google Analytics
|
||||
hide_title: true
|
||||
---
|
||||
# Tracking custom events in Google Analytics
|
||||
|
||||
## What you will learn in this guide
|
||||
|
||||
This guide will take you through the process of setting up and tracking custom events in Google Analytics. It is recommended that you take a look through the [setup guide](/library/modules/google-analytics/guides/setting-up-google-analytics) before reading this one.
|
||||
|
||||
## Overview
|
||||
|
||||
We will learn about the following things:
|
||||
|
||||
- Sending static data
|
||||
- Sending dynamic data based on user input
|
||||
|
||||
## Sending static data
|
||||
|
||||
To send custom events we use the **Send Google Analytics Data** node.
|
||||
|
||||
The **Send Google Analytics Data** node is built on top of Google's own `gtag` function, meaning that all _Google Analytics 4_ documentation you see that uses `gtag` can be directly copied and pasted into the node.
|
||||
|
||||
In Google's own documentation on [sending events](https://support.google.com/analytics/answer/11147304) we can find the following code in the section named "Send an event":
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
```html
|
||||
<script>
|
||||
gtag("event", "publish", {
|
||||
role: "Writer",
|
||||
})
|
||||
</script>
|
||||
```
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
We can copy the data passed to the gtag function and paste it directly into the <span className="ndl-data">Gtag Tracking Data</span> input in the **Property Panel** for the **Send Google Analytics Data** node, like so:
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We can now submit the data to Google by sending a signal to the nodes <span className="ndl-signal">Do</span> input.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We have now successfully tracked our first custom event!
|
||||
|
||||
## Sending dynamic data based on user input
|
||||
|
||||
In some cases we want to provide more in depth data that might be dependent on specific user input. In this case we can use the **String Format** node.
|
||||
|
||||
Let's build a small app that tracks the user's favourite type of noodle dish. We'll use a **Text Input** and a **Button** to build a tiny form.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We are now ready to add the tracking.
|
||||
|
||||
Create a **String Format** node and open up it's **Property Panel**. In the <span className="ndl-data">Format</span> input we can now write our custom event.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
```js
|
||||
"event", "submitted_dish", {"dish": "{userDish}"}
|
||||
```
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
The `{userDish}` part of this code will create an input named <span className="ndl-data">userDish</span> on this node. We can now send the <span className="ndl-data">Text</span> from **Text Input** to the <span className="ndl-data">userDish</span> input on **String Format**.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
:::caution
|
||||
It is **very important** that the `{userDish}` is in quotation marks if the value is a <span className="ndl-data">string</span>, otherwise the tracking will fail. <span className="ndl-data">Numbers</span> can be unquoted.
|
||||
:::
|
||||
|
||||
Now we need to send this data to Google. Create a **Send Google Analytics Data** node, and connect the **String Format** <span className="ndl-data">Formatted</span> output to the **Send Google Analytics Data** <span className="ndl-data">Gtag Tracking Data</span> input, and the **Button** <span className="ndl-signal">Click</span> output to the **Send Google Analytics Data** <span className="ndl-signal">Do</span> input. We will also connect the <span className="ndl-signal">Data Sent</span> output from **Send Google Analytics Data** to the **Text Input** <span className="ndl-signal">Clear</span>, to visually indicate that the data has been sent.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We have now successfully tracked the users favourite noodle dish! Hop on into the Google Analytics Reports view and use this knowledge responsibly.
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: Google Analytics Root
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Google Analytics Root
|
||||
|
||||
This node loads Google Analytics in your Noodl app. It _must_ be placed in your **Root Component** for the tracking to work properly. You can find your **Root Component** in the **Components** list in the sidebar, having a house icon beside it.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
This node uses [Google Analytics 4](https://developers.google.com/analytics/devguides/collection/ga4) and requires a [Google Analytics Measurement ID](https://support.google.com/analytics/answer/9539598#find-G-ID).
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Measurement ID</span> | The [Google Analytics Measurement ID](https://support.google.com/analytics/answer/9539598#find-G-ID) to send the data to. |
|
||||
| <span className="ndl-data">Allow Tracking</span> | Sets if tracking should be allowed. For GDPR reasons this is disabled by default. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------------------- | ---------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Starting Tracking</span> | Sends a signal after the tracking code is activated, before it's initialised in the app. |
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Send Google Analytics Data
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Send Google Analytics Data
|
||||
|
||||
This node is used to send custom data to Google Analytics. It works similarily to the [gtag](https://support.google.com/analytics/answer/11147304) function provided by Google.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Gtag Tracking Data</span> | The data that should be sent to Google Analytics. <br/><br/>For the code `gtag("event", "search", {"term": "Noodl"})` you would send `"event", "search", {"term": "Noodl"}` to this input. |
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------- | ------------------------------------------------------------------ |
|
||||
| <span className="ndl-signal">Do</span> | Send a signal to this input to track the data in Google Analytics. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Signal | Description |
|
||||
| --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Data Sent</span> | Sends a signal when the data has been sent to Google Analytics. Useful for clearing user inputs after submission. |
|
||||
10
library/modules/google-analytics/release-notes.md
Normal file
10
library/modules/google-analytics/release-notes.md
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Release Notes
|
||||
hide_title: true
|
||||
---
|
||||
# Release Notes
|
||||
|
||||
Version 1.0 [2022-01-14]
|
||||
|
||||
- Support for basic tracking and late initialisation with the `Google Analytics Root` node.
|
||||
- Support for custom event tracking with the `Send Google Analytics Data` node.
|
||||
Reference in New Issue
Block a user