Google Analytics 4 parameter setup

  • Updated
Follow

This guide describes how to set up the data collection necessary to use SegmentStream's advertising optimisation feature. The data collected includes non-personally identifiable information in the form of click IDs and cookies.

Getting started

  1. Make sure BigQuery Daily and Streaming exports are enabled for your Google Analytics 4 account. Currently, we support US and EU locations for the datasets.
  2. Make sure you've connected your Google Analytics 4 to SegmentStream.
  3. Grant BigQuery access for your GCP project where GA4 data is stored for the SegmentStream support team.

Click ID custom fields setup

By default, Google Analytics 4 BigQuery export saves landing page URL inside the page_location parameter.

Unfortunately, each event parameter inside the export is limited to 420 symbols and there might be situations when you have a much longer URL, especially if this URL includes click IDs from advertising platforms. i.e.

  • fbclid - for Facebook click ID
  • mcid - for Microsoft Ads click ID
  • yclid - for Yandex.Direct click ID
  • dclid - for Campaign Manager or DV360 click ID
  • wbraid - for Google wbraid click ID
  • etc

Having a page_location parameter longer than 420 symbols will lead to losing UTMs and click ID parameters in your Google BigQuery data. As a workaround, it is required to send the parameters as separate fields alongside your Google Analytics events.

Below you can find a step-by-step tutorial on how to do this.

If you are using GTM

  1. Inside your Google Tag Manager go to Variables, click New and choose variable type URL from the list:Screenshot_2021-07-01_at_21.28.09.png

  2. Define your Variable Name (i.e. fbclid for Facebook click ID), choose Query for the Component Type and define a Query Key depending on the parameter where click ID is sent:

    • fbclid - for Facebook click ID
    • mcid - for Microsoft Ads click ID
    • yclid - for Yandex.Direct click ID
    • dclid - for Campaign Manager or DV360 click ID
    • wbraid - for Google wbraid click ID
    • etc

    And click Save.

    Screenshot_2021-07-01_at_21.48.04.png

  3. Open your Google Analytics 4 Configuration tag and define an additional field (make sure you use a proper field name and value:

    Screenshot_2021-07-01_at_21.33.22.png

  4. Click Save and Publish the container.

  5. Make sure the click ID is properly collected as a custom parameter inside your Google BigQuery GA4 data export.

If you are using gtag.js

  1. Update your gtag config call with the required parameters from the query.

    Example code for Facebook click ID:

    const urlParams = new URLSearchParams(window.location.search);

gtag('config', 'G-XXXXXXXXXX', {
	fbclid: urlParams.get('fbclid')
});

    You can add more parameters depending on the advertising platforms you are using:

    const urlParams = new URLSearchParams(window.location.search);

gtag('config', 'G-XXXXXXXXXX', {
	fbclid: urlParams.get('fbclid'), // for Facebook
	mcid: urlParams.get('mcid'), // for Microsoft Ads
	dclid: urlParams.get('dclid'), // for Google Campaign Manager
	wbraid: urlParams.get('wbraid'), // for Google wbraid ID
    	yclid: urlParams.get('yclid') // for Yandex.Metrica
});

  2. Optional. Add parameter to all other events:

    const urlParams = new URLSearchParams(window.location.search);

gtag('event', '<EVENT_NAME>', {
	fbclid: urlParams.get('fbclid'),
	yclid: urlParams.get('yclid'),
	// other params...
});

    ☝ Adding parameters additionally for events may improve tracking in case your gtag config call was triggered before the config call.

Cookies custom fields setup

By default, Google Analytics 4 doesn't collect any data about first-party cookies like _fbp, _ym_uid and others. These cookies are required for the server-side conversion tracking and need to be collected into BigQuery.

Below you can find a step-by-step tutorial on how to do this.

If you are using GTM

  1. Inside your Google Tag Manager go to Variables, click New and choose variable type 1st Party Cookie from the list:

    Screenshot_2021-08-27_at_17.12.21.png

  2. Define your Variable Name (i.e. fbp for Facebook's 1st party cookie ID), set Cookie Name depending on the cookie which value you would like to collect:

    • _fbp - for Facebook 1st party cookie
    • _fbc - for Facebook click ID 1st party cookie
    • _ttp - for TikTok 1st party cookie
    • _ym_uid - for Yandex.Metrica 1st party cookie
    • etc

    And click Save.

    Screenshot_2021-08-27_at_17.14.52.png

  3. Open your Google Analytics 4 Configuration tag and define an additional field (make sure you use a proper field name and value:

    Screenshot_2021-08-27_at_17.21.41.png

  4. Click Save and Publish the container.

  5. Make sure the cookie ID is properly collected as a custom parameter inside your Google BigQuery GA4 data export.

If you are using gtag.js

  1. Define a global function that will dynamically get specified cookie values depending on the advertising platforms you are using:

    function getFbpCookie() {
	try {
		return /_fbp=(fb\\.1\\.\\d+\\.\\d+)/.exec(window.document.cookie)[1];
	} catch (e) {
		return undefined;
	}
}

// other cookie extraction functions....

    ☝ It is important to have it as a function instead of saving to a global variable because sometimes cookie value might not be yet available (for example, Facebook Pixel SDK is not loaded).

     

  2. Add parameter to gtag config call:

    gtag('config', 'G-XXXXXXXXXX', {
	fbp: getFbpCookie(),
	// other params...
});

  3. Optional. Add parameter to all other events:

    gtag('event', '<EVENT_NAME>', {
	fbp: getFbpCookie(),
	// other params...
});

    ☝ Adding parameters additionally for events may improve tracking in case your gtag config call was triggered before cookies were set.

Setup for built-in Shopify GA4

  1. From your Shopify admin, got to Online store > Preferences.
  2. Click Google from the left side menu.
  3. Copy the ID of the Google Analytics tag, you'll need it in later steps.
  4. From your Shopify admin, go to Online Store > Themes.
  5. Click ... > Edit code.
  6. Open the theme.liquid file.
  7. Enter the following code in the head of the file, replacing G-XXXXXXXXXX with the ID copied from step 3.
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    function getFbpCookie() { try { return /_fbp=(fb\\.1\\.\\d+\\.\\d+)/.exec(window.document.cookie)[1]; } catch (e) { return undefined; } }
    var urlParams = new URLSearchParams(window.location.search);

    gtag('config', 'G-XXXXXXXXXX', {
      fbclid: urlParams.get('fbclid'),
      fbp: getFbpCookie(),
      send_page_view: false
    }); 
    </script>
  8. The code should look like this.
  9. Click Save.

Comments

0 comments

Please sign in to leave a comment.

Powered by Zendesk