Web SDK via Google Tag Manager

Google Tag Manager(GTM) allows for the management of tags that store marketing and third-party code snippets while reducing the amount of necessary production code releases and engineering resources utilized. These templates are best used to speed up implementation of mParticle in situations where GTM was previously utilized across a company’s technical stack. This guide will walk you through steps to integrate the basic functionality of the mParticle Web SDK through GTM.

Available Templates

1. Initialization Template
2. IDSync Template
3. Commerce Event Template
4. Custom Event Template
5. Screen View Event Template

Initialization Template

This template allows for the configuration and loading of the mParticle SDK on your site.

Steps to enable:

1. Select the Initialization Tag Template from the Google Community Template Gallery or import the .tpl file into your GTM workspace.
2. Configure your tag with the proper API Key and desired settings.
3. Configure the trigger to load the SDK as the page is loaded.
4. Deploy the tag.
5. Test: you should see window.mParticle loaded on the your webpage.

IDSync Template

This GTM template allows for a customer to be logged in, logged out, or modified by your GTM implementation. This tag required the successful loading of the mParticle SDK to have been completed prior to this tag firing. This does require some additional set-up in comparison to other GTM tag templates, an identity callback function and user identities will need to be added to the data layer before the tag is triggered.

Steps to enable:

1. Enable the data layer.

<script>
 
    //configure the data layer
    window.dataLayer = window.dataLayer || [];
    
</script>

2. Add an identity callback to the data layer.

 <script>

    //add a custom identity callback to the data layer
    dataLayer.push({
        identityCallback: function(result) { 
            if (result.getUser()) { 
                // Do something once an identity call has been made.
                // For more information, see https://docs.mparticle.com/developers/sdk/web/idsync/#sdk-initialization-and-identify
                console.log(result);
            } 
        },
    });
    
</script>

3. Add desired user identities to the data layer.

<script type="text/javascript">

        //this is an example function that runs when the login button is clicked. 
       function processIDSync(eventName){
            let email = document.querySelector('#email').value; 
            dataLayer.push({
                'userIdentities': {
                    'email': email
                }
            })
            
            //this is the example GTM custom event trigger for IDSync, please note that the identities are pushed before the trigger event. 
            dataLayer.push({'event': gtm-login-click'})
        }
    </script>

4. Select the IDSync Template from the Google Community Template Gallery or import the .tpl file into your GTM workspace.
5. Configure the tag with the desired IDSync event type.
6. Configure the trigger to coincide with the desired IDSync event. gtm-login-click is used in this example.
7. Deploy the tag.

Commerce, Custom, and Screen View Event Templates

These three templates have similar enablement steps. mParticle Commerce Events, mParticle Custom Event, and mParticle Screen View Event can be tracked by leveraging these GTM templates. The current iteration of the commerce event template only supports a single product for product actions. Additionally, the product must be configured as part of the tag. The mParticle SDK must be initialized prior to any of these GTM tags firing for the event to be logged appropriately.

Steps to enable:

1. Select the Tag Template from the Google Community Template Gallery or import the .tpl file into your GTM workspace.
2. Configure the tag with all desired attributes and flags.
3. Configure the tags trigger.
4. Deploy the tag.