{"id":7973,"date":"2022-10-19T14:02:40","date_gmt":"2022-10-19T14:02:40","guid":{"rendered":"https:\/\/docs.campaignsuite.nl\/docs\/gravity-forms\/measurement\/google-analytics-4\/"},"modified":"2022-10-19T14:04:35","modified_gmt":"2022-10-19T14:04:35","slug":"google-analytics-4","status":"publish","type":"docs","link":"https:\/\/docs.campaignsuite.nl\/en\/docs\/gravity-forms\/measurement\/google-analytics-4\/","title":{"rendered":"Google Analytics 4"},"content":{"rendered":"\n

With the provider Google Analytics 4 (GA4) it is possible to perform Client Side and Server Side calls. This is possible for all six different event types. Only with the event types After a webhook call from Findock v2<\/strong> and After a successful payment<\/strong> a Server Side call can be performed and not Client Side.<\/p>\n\n\n\n

Client Side<\/h3>\n\n\n\n

We recommend using the Client Side calls in GA4 if you don’t have Google Tag Manager. When you use the Client Side call, CampaignSuite executes javascript functions by means of gtag(); This requires that Google Tag<\/a> is installed on the website:<\/p>\n\n\n\n

<!-- Google tag (gtag.js) -->\n<script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=GA_TRACKING_ID\"><\/script>\n<script>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){window.dataLayer.push(arguments);}\n  gtag('js', newDate());\n  gtag('config', 'GA_TRACKING_ID');\n<\/script><\/code><\/pre>\n\n\n\n
In the above code, replace GA_TRACKING_ID with your own tracking ID from Google Analytics.<\/p>\n\n\n\n
When CampaignSuite executes a Client Side GA4 call, a javascript code will be executed in the visitor’s browser. 
Read here<\/a> more about the code we use for this. The calls to GA4 use events. An example of a simple page change in Gravity Forms might look like this:<\/p>\n\n\n\n
Example of mapping:<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Javascript example<\/h4>\n\n\n\n
<script type=\"text\/javascript\">\n  if (window.gtag == undefined) {\n    window.gtag = function() {\n      window.dataLayer = window.dataLayer || [];\n      dataLayer.push(arguments);\n    };\n  }\n  gtag('event', 'page_switch', {\n    'form_page': 1,\n    'form_id': 4\n  });\n<\/script>\n<\/code><\/pre>\n\n\n\n
The above code uses the Javascript function gtag().<\/p>\n\n\n\n
Server Side<\/h3>\n\n\n\n
Technically it is possible to have a Server Side call made to GA4 for all six event types. This is only available if a Measurement ID and an API secret are entered in the CampaignSuite settings. These can be found in the admin section of your Google Analytics account -> Account Settings -> Data Streams. Click on the stream and copy the Measurement ID here. The value of the API secret can be found under the heading Measurement Protocol API secrets.<\/strong><\/p>\n\n\n\n
 GA4’s Server Side calls use the Measurement Protocol API<\/a><\/strong> from Google. This API also works on the basis of sending events via a POST request to an endpoint (https:\/\/www.google-analytics.com\/mp\/collect).<\/p>\n\n\n\n
The images below show an example of a GA4 Server Side call upon a successful payment in CampaignSuite:<\/p>\n\n\n\n
Example of mapping:<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
POST request example<\/h4>\n\n\n\n
{\n  \"client_id\": \"278327074.1665398324\",\n  \"non_personalized_ads\": false,\n  \"events\": [\n    {\n      \"name\": \"purchase\",\n      \"params\": {\n        \"items\":\n[\n           {\n             \"item_id\": \"Ideal\",\n             \"item_name\": \"One time\",\n             \"quantity\": 1,\n             \"item_category\": \"donations\",\n             \"price\": 25\n           }\n         ],\n         \"currency\": \"EUR\",\n         \"transaction_id\": \"346\",\n         \"value\": 25\n       }\n     }\n   ]\n}<\/code><\/pre>\n\n\n\n