Installing the Usermaven script using Google Tag Manager

Google Tag Manager (GTM) provides a straightforward solution for managing tags and snippets that transmit data to third parties, such as Usermaven, from your website or app. This system allows you to effortlessly add or remove snippets without the need for a developer to update any code.

If you are already using Google Tag Manager to incorporate third-party scripts on your website, you can seamlessly extend its functionality to include the installation of Usermaven's tracking script. This streamlined integration simplifies the process of tracking user actions and facilitates a comprehensive understanding of user engagement.

Tags, triggers, and variables in Google Tag Manager

In Google Tag Manager, three key components play a crucial role in managing and implementing tracking on your website:

• Tags: A tag is a piece of code that you intend to implement on your website. It can range from tracking codes like Facebook Pixel events, page view tracking, and various other functionalities such as changing the color of a button. A tag is essentially the action or task you want Google Tag Manager to perform.

• Triggers: Triggers are conditions that determine when you want your tags to be activated or fired. For instance, if you wish to activate a Google Ads conversion tag when a visitor signs up for a newsletter, signing up for the newsletter becomes the trigger. Triggers define the specific events or scenarios under which tags should execute, such as page views, button clicks, or specific scrolling percentages.

• Variables: Variables are data points within Google Tag Manager that provide information or configurations. They serve as containers for values, ranging from simple to more complex data. These data points are utilized in tags or triggers to make them more specific. For example, if you want a tag to fire only on a specific page (trigger), the variable could be the page URL, with a condition like contains "thank you" or "order successful.”

  

Installing the Usermaven tracking script using Google Tag Manager

Here’s how you can install the Usermaven tracking script using Google Tag Manager:

1. Log in to your Google Tag Manager (opens in a new tab) account and navigate to the designated workspace/container linked with the website you intend to track using Usermaven.

2. Select 'Add a new tag' and, on the tag configuration page, assign a name to your tag.

3. Click on ‘Discover more tag types in the Community Template Gallery’. Locate 'Custom HTML’ and click on it.

4. Incorporate your Usermaven tracking script as a 'Custom HTML Tag' under 'Tag Configuration'.

5. Ensure the ‘Support document. write’ box is checked.

6. For the trigger, opt for the default "All Pages - Page View" trigger, then click 'Save' in the top-right corner. View Google Tag Manager integration with Usermaven.

7. Return to the main dashboard and select 'Submit'.

8. On the Submission Configuration page, click on 'Publish and Create Version,' then provide the version name and description.

9. Once completed, click the 'Publish' button.

To verify the correct configuration of Usermaven, visit your website and then check if the events from your session are visible on the Usermaven dashboard. It may take a few minutes for the events to appear.

Setting up triggers and variables

Upon completing the installation of the Usermaven tracking script, the subsequent step involves adding appropriate triggers and variables. Here's how to create a trigger and configure variable settings:

• Creating a Trigger:

1. Navigate to 'Triggers' on your Google Tag Manager dashboard and click on ‘New’.

2. On the Trigger Configuration Page, provide a name for your trigger.

3. Once done, click the Edit button to reveal trigger types.

4. There are a couple of options available for you to select. If, for instance, you wish to track a ‘Page View’, select 'Page View' and specify when the trigger should activate.

5. After selecting page views, set conditions for the event triggering the trigger. Add multiple conditions if needed.

6. Click 'Save' once the trigger is configured.

• Creating a Configuration Settings Variable:

1. Navigate to 'Variables' on your Google Tag Manager dashboard and click on ‘New’.

2. On the Variable Configuration Page, choose the ‘Google tag: Configuration settings’ variable.

3. Next, add the parameters you want to use. You will find a table of pre-defined parameters below. If none of these fit your needs, you can always create a custom parameter. Just type a name of your choice in the Name field.

4. Once done, enter a name for your variable and click on ‘Save’.

This process ensures a proper setup of triggers and variables, empowering you to customize Usermaven tracking according to your specific requirements.

Sending Custom Events to Usermaven using Google Tag Manager (GTM)

You can send custom events, such as a ‘purchase’ event, to Usermaven via Google Tag Manager (GTM). Here's how you can do it:

• Setting up the Usermaven Pixel Tag

1. In Google Tag Manager, navigate to the 'Tags' section and then select 'New'.
2. Next, give your Tag a name.
3. Choose 'Custom HTML' as the tag type.
4. Insert the Usermaven Pixel Code:

 
<script type="text/javascript">
    (function () {
        window.usermaven =
            window.usermaven ||
            function () {
                (window.usermavenQ = window.usermavenQ || []).push(arguments);
            };
        var t = document.createElement("script"),
            s = document.getElementsByTagName("script")[0];
        t.defer = true;
        t.id = "um-tracker";
        t.setAttribute("data-tracking-host", "https://events.usermaven.com");
        t.setAttribute("data-key", "XXXXXXXX"); // Replace with your actual Usermaven key
        t.setAttribute("data-autocapture", "true");
        t.setAttribute("data-auto-pageview", "true");
        t.src = "https://t.usermaven.com/lib.js";
        s.parentNode.insertBefore(t, s);
    })();
</script>
 

5. Set the trigger to fire on All Pages.

• Creating a Custom HTML Tag for Purchase Events

1. In GTM, click 'Tags' > 'New' and choose 'Custom HTML'.
2. Next, insert the following code:

 
<script>
    function trackUsermavenPurchase(eventModel) {
        if (typeof window.usermaven === "function") {
            console.log("Sending purchase event to Usermaven:", eventModel);
            window.usermaven("track", "purchase", {
                transaction_id: eventModel.transaction_id,
                value: eventModel.value,
                currency: eventModel.currency,
                shipping: eventModel.shipping,
                affiliation: eventModel.affiliation,
                items: eventModel.items.map(function (item) {
                    return {
                        item_id: item.item_id,
                        item_name: item.item_name,
                        quantity: item.quantity,
                        price: item.price,
                        category: item.item_category,
                        variant: item.item_variant,
                    };
                }),
            });
        } else {
            console.error("Usermaven is not available");
        }
    }
    window.dataLayer = window.dataLayer || [];
    function dataLayerHandler() {
        window.dataLayer.forEach(function (event) {
            if (event && event.event === "purchase" && event.eventModel) {
                trackUsermavenPurchase(event.eventModel);
            }
        });
    }
    dataLayerHandler();
</script>
 
 

This script will check for the purchase event in the dataLayer. It will send the purchase details to Usermaven using the usermaven.track() method with relevant properties like transaction_id, value, currency, items, etc and log information in the browser console for debugging. It will also enable advanced settings to ensure proper loading of the Usermaven pixel before the purchase event fires.

• Advanced Tag Settings

Make sure that the Usermaven Pixel loads before the purchase event is tracked. GTM provides a feature called Tag Sequencing, which ensures that one tag (Usermaven Pixel) loads before another tag (Track Purchase).

To ensure proper loading of the Usermaven pixel before the purchase event fires:

1. Go to Advanced Settings in the tag editor.

2. Enable Tag Sequencing.

3. Select 'Fire a tag before Track Purchase fires' and choose the Usermaven Pixel.

4. Enable 'Don't fire Track Purchase if Usermaven Pixel fails or is paused'. This ensures that the purchase tracking will only occur if the Usermaven Pixel loads successfully, preventing inaccurate tracking.

• You can also configure other advanced options, such as tag firing priority, to prioritize the purchase event tag if needed. This however is optional.

Note: Proper tag sequencing ensures accurate tracking and prevents data loss.

• Testing and Debugging

Before publishing, test your setup in GTM Preview Mode:

1. Activate Preview Mode in GTM.

2. Open your website and make a test purchase.

3. In the GTM debug console, confirm that the Usermaven Pixel fires before the Track Purchase tag.

4. Check the browser console for the log: 'Sending purchase event to Usermaven'.

5. Monitor your Usermaven dashboard for proper event recording.

Tip: Allow a few minutes for events to appear in your Usermaven dashboard.

By following these steps, you'll successfully set up custom event tracking from your dataLayer to Usermaven using Google Tag Manager.

Challenges associated with the implementation of Google Tag Manager

- Complexity

Integrating Usermaven with Google Tag Manager is a seamless process due to Usermaven's simplicity and lightweight nature. Following the outlined steps ensures a smooth collaboration between Usermaven and GTM, allowing for effective tracking of website visitors.

However, if you intend to leverage the more advanced features offered by GTM, it is crucial to thoroughly check and test the tracking. GTM provides options such as tag firing priorities, firing options, tag sequencing, and more. Deviating from the basic setup by incorporating these advanced features may impact the Usermaven script's ability to load and track visitors effectively. To navigate these advanced systems, it is advisable to have in-house knowledge and experience with GTM, ensuring optimal utilization of both platforms.

- Issues due to browser extensions

It's important to note that various browsers and browser extensions, such as Brave, Firefox, and Safari, have built-in mechanisms to block the GTM script. This means that a segment of your website visitors might be prevented from being tracked if you choose to install Usermaven using GTM.

For a more accurate tracking experience, it is recommended to consider installing Usermaven without GTM. When Usermaven is integrated without GTM or by utilizing our pixel white-labeling (opens in a new tab), the tracking script is blocked by fewer individuals. This approach ensures a broader reach and more precise analytics by minimizing the impact of browser-based script-blocking mechanisms on your tracking capabilities.