Client Side Setup - Google Tag Manager

Last Updated 2021-04-29

Your Cloudmattr Tag and Public Key

To get started setting up Cloudmattr, you'll need to get your Cloudmattr tag and the Public Key needed to ensure you can send your data to Cloudmattr with Google Tag Manager (or directly on your website or any other tag management platform).


Steps if you don't have an API Key:


  1. Go to https://app.cloudmattr.com/api_keys
  2. Click on "New API Key"
  3. Add a name for your API Key and add the URL or domain of your website, such as "cloudmattr.com"
  4. Click on the gear icon (edit button) on the right side of record
  5. Copy the code snippet shown in screen


Steps if you already have an API Key:


  1. Go to https://app.cloudmattr.com/api_keys
  2. Click on the gear icon (edit button) on the right side of record
  3. Under Domain, add the URL or domain of your website, such as "cloudmattr.com"
  4. Copy the code snippet shown in screen
  5. Click Update


User Tracking

To create and update users in your website or application, you'll need to send at a minimum their User ID and Email, but highly recommend you send additional data to help with your personalization efforts.


Now that you have your initial script and in Google Tag Manager, we can get started. Here we'll assume that you already expose data from your website or application to the client via the dataLayer.



Tag Configuration

Create a new Tag, and name it "Cloudmattr - User Identify" (or something else if you'd like). Add the initial script you got in the previous section, and the Users script, which you can copy below:


<script src="https://cloudmattr.cloudmattr.com/packs/cloudmattr.js?v=1.0.0"></script>
<script type="text/javascript">
  (function() {
    Cloudmattr.init("pk_XXXxxXXxXxXXXxxxxXXxxxXx");
    Cloudmattr.user('{{dlv - User ID}}', {
      first_name: '{{dlv - First Name}}',
      last_name: '{{dlv - Last Name}}',
      email: '{{dlv - User Email}}'
    });
    Cloudmattr.triggerCampaigns();
    Cloudmattr.checklist.trigger();
  })();
</script>


Note: Make sure to use the Script source and Public Key that you got in the first section, the above snippet is only for illustration purposes.


Triggering

You can set the Trigger to fire this tag on All Pages where a User ID is available, or just on All Pages if you'd like as well.


Variables

In the tag above, we're using Data Layer Variables that are available from the dataLayer and passing them to the Cloudmattr tag.



Event Tracking

To track events for users, you'll need at a minimum the User ID of an existing User, and an Event name.


Although you have full flexibility into what events you want to track, and how based on your specific needs, here we'll track Link Clicks as an example.



Tag Configuration

Create a new Tag, and name it "Cloudmattr - Event - Link Clicks" (or something else if you'd like). Add the initial script you got in the previous section, and the Events script, which you can copy below:


<script src="https://cloudmattr.cloudmattr.com/packs/cloudmattr.js?v=1.0.0"></script>
<script type="text/javascript">
  (function() {
    Cloudmattr.init("pk_XXXxxXXxXxXXXxxxxXXxxxXx");
    Cloudmattr.event('Link Click', {
      user_id: '{{dlv - User ID}}',
      occurred_at: '{{cjs - Current DateTime}}',
      properties: {
        'link_text': '{{Click Text}}',
        'link_url': '{{Click URL}}'
      }
    });
  })();
</script>


Triggering

You can use whatever event you have to track link clicks with Google Tag Manager. In this example, we're using the built-in click event GTM has, called "Just Links".


Variables

The variables being used here are a mix of custom data layer variables used in the User tracking part, and built-in Google Tag Manager variables.


Was this article helpful?

RELATED QUESTIONS