Tracking Events via Google Tag Manager

Last updated February 5, 2025

Skin Match Technology events are transmitted via postMessage from a questionnaire iframe to the parent page.

Skin Match Technology events are transmitted via postMessage from an SMT questionnaire iframe to the parent page.

The “Custom HTML PostMessage Listener” GTM tag contains a script that listens for message events, processes incoming data (e.data), and pushes structured data to the dataLayer for analytics purposes, such as Google Analytics (GA4), Facebook Ads, Google Ads. etc.

The “Custom HTML PostMessage Listener” GTM tag contains a script that listens for message events, processes incoming data (e.data), and pushes structured data to the dataLayer for analytics purposes, such as Google Analytics (GA4), Facebook Ads, Google Ads. etc.

See more here - https://developers.google.com/analytics/devguides/collection/ga4/reference/events

Use Cases

  • Audiences and Funnels: Utilize smt-profile data to create targeted audiences and analyze user journeys across the funnel.

  • Leads and Enhanced Conversions: Incorporating email and other identifiers improves attribution accuracy in platforms like Google Ads, Facebook Ads, and others.

  • Segmentation: Segment users by preferences (questionnaire needs) or behavior (e.g., products added to cart/wishlist).

GTM Events

  • Trigger: Fired once when user profile data is sent after completing the questionnaire.

    Description: Contains detailed user information collected from the questionnaire. 

    Reference: See Table A for smt-profile data fields.

    Example dataLayer Push:
    {
        event: "smt_profile",
        smt_data: {
            questionnaire_id: "665981b273607",
            questionnaire_gender: "unisex",
            questionnaire_pregnancy: "yes",
            questionnaire_sun_exposure: "everyday",
            questionnaire_allergies: "yes",
            questionnaire_allergy_groups: "pigments",
            questionnaire_age: "39-44",
            questionnaire_skinfeeling_morning: "normal",
            questionnaire_skinfeeling_day: "normal",
            questionnaire_skintype_result: "normal",
            questionnaire_sensitive_skin: "yes",
            questionnaire_sensitive_skin_options: "eczema",
            questionnaire_needs: "glow-radiance",
            questionnaire_product_preferences: "paraben-free",
            questionnaire_signup_email: "test@gmail.com",
            questionnaire_birthday_day: "05",
            questionnaire_birthday_month: "11",
            questionnaire_birthday_year: "2009",
            questionnaire_user_id: 1234567
        }
    }

  • Trigger: Fired whenever a user adds a product to the shopping cart.

    Description: Event for tracking added products. The event structure is based on the Google Analytics 4 Enhanced Ecommerce event and can be used for any other system like Google Ads, Facebook, etc.

    Reference: See Table B for Enhanced Ecommerce data fields.

    Example dataLayer Push:

    {
        event: "add_to_cart",
        ecommerce: {
            items: [
                {
                    item_id: "0641628008100",
                    item_name: "Elemis Pro-Collagen Cleansing Balm",
                    item_brand: "Elemis",
                    item_category: "Cleansing",
                  item_list_name: "Quiz Recommendations",
                    price: 10.01,
                    quantity: 1
                }
            ]
        }
    }

  • Trigger: Fired whenever a user adds a product to the wishlist.

    Description: Event for tracking wishlist activity. The event structure is based on the Google Analytics 4 Enhanced Ecommerce event and can be used for any other system like Google Ads, Facebook, etc.

    Reference: See Table B for Enhanced Ecommerce data fields.

    Example dataLayer Push:

    {    event: "add_to_wishlist",    ecommerce: {        items: [            {                item_id: "0641628008102",                item_name: "Elemis Hydrating Serum",                item_brand: "Elemis",                item_category: "Skin Care",

                    item_list_name: "Quiz Recommendations",                price: 15.00,                quantity: 1            }        ]    }}

  • Trigger: Fired whenever a user removes a product from the wishlist.

    Description: Not part of Enhanced Ecommerce but can be used for custom analytics.

    Example dataLayer Push:

    {
        event: "remove_from_wishlist",
        smt_data: {
            ean: "0641628008102"
        }
    }

  • Trigger: Fired when a user navigates to the next slide (via navigation arrows or answering a question).

    Description: Tracks the slide index as a parameter (slideIndex).

    Example dataLayer Push:

    {
        event: "next_slide",
        smt_data: {
            slide_index: 3
        }
    }

  • Trigger: Fired when a user navigates to the previous slide (via navigation arrows or answering a question).

    Description: Tracks the slide index as a parameter (slideIndex).

    Example dataLayer Push:

    {
        event: "previous_slide",
        smt_data: {
            slide_index: 2
        }
    }

  • Trigger: Fired when a slide change occurs, including skips (e.g., using the progress bar).

    Description: This catches skipping around within the questionnaire by means of the progress bar navigation, as well as any regular navigation. It will fire after the next / previous events.

    Tracks the slide index as a parameter (slideIndex).

    Example dataLayer Push:

    {
        event: "goto_slide",
        smt_data: {
            slide_index: 5
        }
    }

  • Trigger: Fired when the user completes the questionnaire.

    Description: Confirms questionnaire completion. This event does not include parameters.

    Example dataLayer Push:

    {
        event: "smt_finish_questionnaire"
    }


Table A - SMT Profile Data Fields

Table B - Enhanced Ecommerce Data Fields

Related Topics