Integrate with Google Analytics (GA4)

Google Analytics 4 is an analytics service that enables you to measure traffic and engagements across your websites and apps. Here is how to integrate Appfarm with GA4, allowing GA4 to analyze the usage of Appfarm Apps.

Step 1 - Get tracking code from GA Dashboard

1. Open your Analytics dashboard (GA Dashboard), and follow this guide to get started with GA (GA4 Setup Guide). When you get to the tracking code part, make sure to copy it to your clipboard.

2. Now we will insert the new tracking code into Appfarm Create. The tracking code you have copied should look something like this:

<!-- Google tag (gtag.js) -->
<script async src="<https://www.googletagmanager.com/gtag/js?id=G-DWXSNLB5XX>"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-DWXSNLB5XX');
</script>

With reference to the above example, G-DWXSNLB5XX is to be replaced with your unique Google Analytics ID.

Step 2 - Copy tracking code into Appfarm Create

1. Open Appfarm Create. Navigate to Environments -> [ANY ENVIRONMENT YOU WANT TO TRACK], and locate section Other -> Custom Header Tags.

2. Create a new header tag with a tag type of Script Content. Also, give the header tag a short description (e.g. "GA4"). For the script, copy the code that you copied earlier and insert it into the script property, and click OK. When pasting the code, remove the <script/> tags so that the only thing you paste in is the following (remember to use your own Google Analytics ID, and not the G-DWXSNLB5XX example below):

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-DWXSNLB5XX');

Custom Header Tag - GA4 Script Content

1. Next, add a new Header tag with the tag type Script URL. Also, add a short description (e.g. "GA4 - URL"). For the script URL value, paste in the script src (found in the code you copied earlier), and click OK. This URL should look something like this:

https://www.googletagmanager.com/gtag/js?id=G-DWXSNLB5XX

Custom Header Tag - GA4 Script URL

1. In Appfarm Create, in the same Environments menu, navigate to the section Content Security -> Script Sources. Add a new item with the same URL as in the previous step:

Script Sources - GA4 URL

Now you are ready to set up tracking in your Appfarm App!

Step 3 - Set up tracking in your Appfarm App

In the following steps, we will show you how to send a pageview or event to the new GA4 property using the Run Code action node in Appfarm.

We have already included the URL for the gtag() javascript library in the previous steps. So all we need is some short code to trigger a new event.

GA4 has two main concepts to be measured: Events and Pageviews. You may read more about these here:

• GA - Pageview
• GA - Events

Track a Pageview manually (optional)

Pageviews are sent automatically to GA4. Whenever someone navigates to a new view (i.e. the URL is changed / the browser history is changed), an enhanced measurement event called page_view is sent from your website to Google Analytics. Since the event is sent automatically, you don't need to send pageview data to Analytics manually.

However, when you want to manually control how pageviews are sent (e.g. single-page applications or infinite scrolling), you can disable pageviews and then manually send them from your website.

If you want to manually send pageview events to GA4: In the action that is executed when navigating: Add a Run Code action node, and insert the following code:

// Sends a event for pageview. [GA TRACKING CODE] needs to be replaced with your Google Analytics ID
gtag('config', [GA TRACKING CODE], { page_title: pageTitle, page_path: pagePath })
resolve()

Track an Event

In GA4, you may track a set of recommended (built-in) events, or your own custom events (read more here). If you want to send the event that someone signed up, you may track this by adding a Run Code action node to the action that is executed:

gtag("event", "sign_up", {
  method: "From Invite"
});
resolve()

In the above example, the recommended event sign-up has 1 parameter (method). Different Events have different parameters. Here, we may define the value of this parameter based on how we want to track the different sign-ups (if multiple methods exist).