How to Import the Skin Match Technology Events GTM Container

Last updated February 5, 2025

This guide walks you through importing the SMT Events GTM Container into your Google Tag Manager (GTM) workspace.

The container includes predefined tags, triggers, and variables to handle Skin Match Technology Questionnaire events such as smt_profile, add_to_cart, add_to_wishlist, remove_from_wishlist, and more.

Prerequisites

Before you begin, ensure the following:

  1. You have access to the Google Tag Manager account for the website where SMT Events will be implemented.

  2. You have the container file ”SMT-Events-GTM” in .json format. This file contains all the predefined tags, triggers, and variables. You can find it in your getskinmatch.com account in Edit Questionnaire > Settings > Integration.

  3. You are familiar with the basic operations in GTM, such as creating tags, triggers, and variables.

Step 1: Access Your GTM Workspace

  1. Go to Google Tag Manager.

  2. Select the appropriate GTM account and container for your website.

  3. Navigate to the Workspace tab.

  4. Create a new Workspace “SMT Events”.

Step 2: Import the Container

  1. In the left-hand menu, click on Admin.

  2. Under the Container section, select Import Container.

Step 3: Upload the Container File

  1. Click Choose Container File and upload the ”SMT-Events-GTM.json”  file.

  2. Select your import options:

    • Workspace: Choose the workspace “SMT Events” to import the container.

    • Choose an import option:

      • Overwrite: Replaces all existing tags, triggers, and variables in your current workspace. Use with caution.

      • Merge (Recommended): Adds the new tags, triggers, and variables without affecting existing ones. Select Rename conflicting tags, triggers, and variables to avoid conflicts.

Step 4: Review Changes

  1. After the file is uploaded, you’ll see a summary of the tags, triggers, and variables that will be added or modified.

  2. Carefully review the changes to ensure no conflicts or unintended modifications.

  3. Click “Add to Workspace” to proceed.

Step 5: Publish or Test

  1. After importing, test the configuration:

    • Go to the Preview mode in GTM to ensure that the events fire correctly.

    • Open the website and trigger SMT events (e.g., completing the questionnaire, adding items to the cart, etc.) to verify that data is pushed to the dataLayer.

  2. Once verified, click Submit in GTM to publish the changes.

Included in the SMT Events GTM Container

Tags:

  • Custom HTML Listener: A tag containing the postMessage listener script to handle SMT events.

Triggers:

  • Predefined triggers to listen for SMT-specific events such as:

    • smt_profile

    • add_to_cart

    • add_to_wishlist

    • remove_from_wishlist

    • Navigation events (next_slide, previous_slide, goto_slide)

    • smt_finish_questionnaire

Variables:

  • All custom SMT dataLayer variables start with “dlv - smt_data.{{key}}”.

  • GA4 Enhanced Ecommerce variables. 

Testing the Container

  1. Preview in GTM:

    • Use the Preview mode to debug and verify the events firing as expected.

Check the dataLayer outputs in the browser developer console (window.dataLayer).

Troubleshooting

  1. Event Not Firing:

    • Ensure the postMessage listener is receiving data from getskinmatch.com.

    • Verify the action values in the incoming data match the expected SMT events.

  2. Incorrect Data:

    • Double-check the mapping of variables and parameters in the container.

    • Ensure the decodeData function formats the keys correctly.