# Pythagoras - solutions - Measurement Protocol | Developer Instructions | Web

This technikas tast containe information about setting up sening information from HubSpot CRM to GA4 thourout Measurment Protocol. These are supplemented with code snippet instructions aimed at developers who play an important role in the measurement setup. As not all data is available on the page initially, we ask developers to prepare this and provide the necessary data when certain interaction events take place. Our goal is to deploy an error-proof setup which is not prone to changes in the DOM of the website. Therefore we strive to collect as much data as possible made available through back- and frontend data streams.

## [<span class="octicon octicon-link" style="color: rgb(0, 0, 0); vertical-align: middle; visibility: hidden;"></span>](#Table-of-Contents "Table-of-Contents")Table of Contents

<span class="toc"></span>

## [<span class="octicon octicon-link" style="color: rgb(0, 0, 0); vertical-align: middle; visibility: hidden;"></span>](#General-Information "General-Information")General Information

Sending data from HubSpot to Google Analytics 4 requires a specific structure. All parameters must be sent in JSON format through the Measurement Protocol. The request should include key fields such as the **Measurement ID** (measurement_id), **client ID **(client_id), **session ID** and **timestamp** to identify users. Event data is structured within an event object, containing the event name and relevant event parameters.
In particular, the payload must include:

* **Client ID:** This is used to uniquely identify the user or device.
* Measurement ID: The ID associated with the GA4 property.
* **Session ID:** A unique identifier for each user session. This helps track user behavior across a single session, especially when multiple interactions occur.
* **Timestamp:** The time when the event took place, ensuring that the event data is aligned accurately with user interactions, even if sent later.
* **Event Name:** Describes the type of interaction (e.g., purchase, form_submission).
* **Event Parameters:** Additional information related to the event, such as revenue, page title, or form field data.

It's important that developers ensure all required parameters are included, such as timestamps and user information, and handle any errors or failed requests to guarantee data accuracy. The setup should also adhere to data privacy regulations, such as GDPR or CCPA, ensuring that personally identifiable information (PII) is not sent to GA4.

### Client Id

After a successful meeting booking on the page https://meetings-eu1.hubspot.com/meetings/pythagoras/book-a-demo, along with other customer data, it is necessary to send the Google Analytics 4 **Client ID** to the CRM for further analysis of user actions and interactions.

The **Client ID** is a unique identifier for a user or device, automatically generated by Google Analytics during the user's first visit to the website. This identifier is stored in the user's **browser cookie** and can be retrieved for transmission to the CRM.

Parameter Name:` _ga`
Value: `Everything that follows GA1.1.`

In the screenshot below, the part highlighted in green represents what needs to be sent as the Google Analytics Client ID:


For instance, in the screenshot, the browser cookie appears as follows:

`GA1.1.644846202.1727163978`

The Client ID will be extracted as:

`644846202.1727163978`

This is the value that needs to be transmitted.

Below is an example script that can be used to extract this parameter:

function() {
    var match = document.cookie.match('(?:^|;)\\s*_ga=([^;]*)');
    var raw = (match) ? decodeURIComponent(match[1]) : null;
    if (raw) {
        match = raw.match(/(\d+\.\d+)$/);
    }
    var gacid = (match) ? match[1] : null;
    if (gacid) {
        return gacid;
    }
}

### Session Id

The **Session ID** is a unique identifier assigned to each session a user has on the website. A session is a group of user interactions within a specific time frame. GA4 uses this **Session ID** to track user interactions during a single session, allowing for accurate reporting of session data, including metrics such as session duration, engagement, and conversions. By transmitting the **Session ID**, it becomes easier to link user behavior across multiple interactions within one session and provides a clearer understanding of how users engage with the site.

Parameter Name: `_ga_{{GA_id}}`
Value:` Everything after GS1.1. and up to the first period `

In the screenshot below, the part highlighted in greem represents what needs to be sent as the **Session ID **(GS1):


For example, in the screenshot, the browser cookie appears as follows:
`GS1.1.1727174988.2.1.1727175042.6.0.0`

The **Session ID** will be extracted as:
`1727175042`

This is the value that needs to be transmitted.

Below is an example script that can be used to extract this parameter:

function getSessionNumber() {
    // Example GA Stream ID
    const pattern = /_ga_Q7XTW38WLL=GSd.d.(w+).(d+)/;
    const match = document.cookie.match(pattern);
    const sessionNumber = match?.[2];

    if (!sessionNumber) {
        // Cookie not yet available; wait a bit and try again.
        window.setTimeout(() => getSessionNumber(callback), 200);
        return;
    }

    return sessionNumber;
}

### Timestamp_micros

The **Timestamp_micros** represents the exact time of an event, measured in microseconds. This value is essential for accurate tracking and attribution of user actions across systems, ensuring precise event timing.

The value of **Timestamp_micros** should be generated right after the user completes a form on the website. After form submission, the timestamp should be recorded and stored in the CRM for further analysis and reporting.

## Description of variables for data transfer

### URL Parametrs

| | Value | Comment |
| -------- | -------- | -------- |
| API Secret | 8ArRy4ikS9qr1CmbA8jqVw | API Secret |
| measurement_id| G-8P87N374QH | ID stream GA4|

### JSON

| Parameter | Value Type | Example | Comment|
| -------- | -------- | --- | -------- |
| client_id | text | 123123.12323 | Client Id from GA (required) |
| session_id | int | 123123 | Session Id from GA (required |
| timestamp_micros | text | 123123123 | |
| event[{}] | text | event_booking | Afters succesfull meeting booking |

When client succesfully book the meeting slot a request should be made using the following [configuration](https://ga-dev-tools.google/ga4/event-builder/?p=2&d=0&f=0&c=custom_event&j=event_booking&n=644846202.1727163978&k=8ArRy4ikS9qr1CmbA8jqVw&i=G-8P87N374QH&e=1727270795972000&m=W10&a=W3sibmFtZSI6Im1lZXRpbmdfaWQiLCJ0eXBlIjoic3RyaW5nIiwidmFsdWUiOiJNXzEyMzQ1In0seyJuYW1lIjoibWVldGluZ190aW1lIiwidHlwZSI6InN0cmluZyIsInZhbHVlIjoiMjAyMy0xMi0xOFQxMDowMDowMCJ9LHsibmFtZSI6Im1lZXRpbmdfc3RhdHVzIiwidHlwZSI6InN0cmluZyIsInZhbHVlIjoiY29uZmlybWVkIn0seyJuYW1lIjoic2Vzc2lvbl9pZCIsInR5cGUiOiJudW1iZXIiLCJ2YWx1ZSI6IjE3MjcxNzUwNDIifV0):

POST  /mp/collect?api_secret=8ArRy4ikS9qr1CmbA8jqVw HTTP/1.1
HTTP/1.1
HOST: www.google-analytics.com
Content-Type: application/json

**Important!** Only status changes that include a client_id should be transmitted.

**Code Implementation (example):**

{
  "client_id": "644846202.1727163978",
  "timestamp_micros": "1727270795972000",
  "non_personalized_ads": false,
  "events": [
    {
      "name": "event_booking",
      "params": {
        "meeting_id": "M_12345",
        "meeting_time": "2023-12-18T10:00:00",
        "meeting_status": "confirmed",
        "session_id": 1727175042
      }
    }
  ]
}

## Suggestions

To automate the process of transmitting booking meeting data from HubSpot to Google Analytics 4 using the Measurement Protocol, webhooks can be integrated with HubSpot workflows. This will allow you to send real-time data when specific events occur, such as a change in booking status.

[Here](https://knowledge.hubspot.com/workflows/how-do-i-use-webhooks-with-hubspot-workflows?_gl=1*1mr3zrs*_gcl_au*NDgwMDY3MDE0LjE3MjcyNjExMjI.*_ga*MTIwNjk1MzEzNi4xNzI3MjYxMDc5*_ga_LXTM6CQ0XK*MTcyNzI2MTA3OS4xLjEuMTcyNzI2MTI4MS41NS4wLjA.) documentation that can be usefull

---

## [<span class="octicon octicon-link" style="color: rgb(0, 0, 0); vertical-align: middle; visibility: hidden;"></span>](#Contact-for-Questions "Contact-for-Questions")Contact for Questions

<div class="alert alert-info" style="font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif; font-size: 16px; letter-spacing: 0.35px; margin-bottom: 0px !important;">

<span style="font-weight: 700;">For all the questions regarding the measurement plan please reach out to:</span>
Muslim Karaiev - [[e-mail]](mailto:[e-mail])
Valeriia Mishcherikova - [[e-mail]](mailto:[e-mail])

</div>