👷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:

<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>

1. 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.