# Google Analytics 4 with GTM

*Note: This is only needed if you have GA4 setup through GTM. If you have added the GA4 script tag directly in your HTML, the Optibase events will be sent automatically.*

#### Guide: Setting Up a GTM Trigger for Optibase Variant Shown Event

This guide will walk you through setting up a Google Tag Manager (GTM) trigger that fires when an Optibase variant is shown. Additionally, we will create a tag that sends an event to Google Analytics 4 (GA4).

**Step 1: Access GTM and Create a New Trigger**

1. **Log in to your GTM account** and open the container you want to configure.
2. **Navigate to Triggers** in the left-hand menu.
3. Click on the **New** button to create a new trigger.
4. **Name your trigger** (e.g., "Optibase Variant Shown Trigger").
5. Choose **Trigger Type: Custom Event**.

**Step 2: Set Up the Custom Event Trigger**

1. In the **Trigger Configuration**, set the **Event Name** to a custom name, such as `optibase_variant_shown`.
2. Choose **This trigger fires on: All Custom Events**.

**Step 3: Create a Custom HTML Tag to Listen for Optibase Variants**

1. **Navigate to Tags** in the left-hand menu.
2. Click on the **New** button to create a new tag.
3. **Name your tag** (e.g., "Optibase Variant Listener").
4. Choose **Tag Type: Custom HTML**.
5. Add the following HTML and JavaScript code to the HTML field:

```html
<script>
  (function() {
    function sendOptibaseEvent(variants) {
      variants.forEach(function(variant) {
        window.dataLayer.push({
          event: 'optibase_variant_shown',
          event_category: 'optibase',
          event_label: variant.userFriendlyTestId + ':' + variant.userFriendlyVariantId,
          shownVariant: variant
        });
      });
    }

    if (window.optibaseAddActiveVariantsListener) {
      window.optibaseAddActiveVariantsListener(sendOptibaseEvent);
    }
  })();
</script>
```

6. **Set the tag to fire on All Pages**.

**Step 4: Create Variables to Capture Event Data**

1. **Navigate to Variables** in the left-hand menu.
2. Click on the **New** button to create a new variable.
3. **Name your variable** (e.g., "`event_category`").
4. Choose **Variable Type: Data Layer Variable**.
5. Set the **Data Layer Variable Name** to `event_category`.
6. Repeat steps 2-5 to create another variable for `event_label`.

**Step 5: Create a GA4 Event Tag to Capture the Variant Data**

1. **Navigate to Tags** in the left-hand menu.
2. Click on the **New** button to create a new tag.
3. **Name your tag** (e.g., "GA4 Optibase Variant Event").
4. Choose **Tag Type: GA4 Event**.
5. Select your GA4 configuration tag in the **Configuration Tag** field.
6. Set the **Event Name** to `optibase_variant_shown`.
7. In the **Event Parameters** section, add the following parameters:
   * **Parameter Name**: `event_category`
     * **Value**: `{{event_category}}`
   * **Parameter Name**: `event_label`
     * **Value**: `{{event_label}}`
8. Click on **Triggering** and add the custom event trigger you created in Step 1 (e.g., "Optibase Variant Shown Trigger").

**Step 6: Publish Your Changes**

1. Click on the **Submit** button in the top right corner of the GTM interface.
2. Follow the prompts to publish your changes.

**Final Check**

* **Preview your GTM container** to ensure that the custom event fires correctly when an Optibase variant is shown.
* **Check GA4** to verify that the events are being recorded as expected.

By following these steps, you will have set up a GTM trigger that listens for Optibase variant events and sends the relevant data to GA4.