Google Tag Manager

Before You Begin

This document assumes that you already have access to a Google Tag Manager(GTM) account and the container you will be using is installed on your web property(s). If not, please refer to the GTM documentation for getting the tag manager up and running before proceeding.

Installing the Latest Lytics Tag

Sign into your GTM account.
Navigate to the workspace that you would like to install the Lytics tag into.
Click New Tag from the dashboard or New at the top right from the *Tags list.
Name your tag Lytics JavaScript Tag or something descriptive.
Click Tag Configuration.
Select Custom HTML from the resulting menu.
In a new tab/window log in to your Lytics account.
From the Lytics dashboard access the administration menu at the top right.
Select Install Javascript Snippet.
Select I'll Do it myself.
Select the Google Tag Manager tile.
Copy the full Lytics tag to your clipboard.
Navigate back to the GTM tab and paste your full Lytics Tag into the HTML text area.
Click Triggering
Select All Pages

Note: This will load the Lytics tag on all pages. Feel free to customize the triggering to your liking but it is recommended to place our tag on all pages in order gather the best behavioral data for your visitors.
At the top right click Save to save your changes.
Once you have saved you should be taken back to the list of tags.
In order to complete your changes you must publish a new version of your container.
At the top right click Submit.
Fill in the resulting form with as much detail about the changes as possible. This is useful when tracking changes to your container over time.
Click Publish at the top right to complete the installation.

Verify the Installation

Once you have published the container your changes should take effect within a few minutes.

Navigate to the web property where the GTM container was installed. You may need to refresh your browser window to ensure you have loaded the latest GTM container configuration.
Most browsers have Developer Tools. In Google Chrome if you right-click and go to Inspect the Developer Tools menus will open.
Click Console from the top menu on the panel that opened up.
In the console type jstag and press enter.
The result of that command should be something along the lines of {_q: Array(0), _c: {…}, ts: 1549050811024, ver: "2.0.0", init: ƒ, …}. The numbers and version may differ but you should not receive a message related to being Not Found.
If you do see not found please refer to the GTM documentation on further debugging their tag to ensure the current version is being shown.
You are done. Withing a few minutes you should begin to see some default web data flowing into the Streams section of your Lytics account.

Sending Additional Data to Lytics from within GTM

Since GTM is a tag manager there are various approaches to sending data related to a users behavior, such as filling out a form or clicking a button, to any number of tags managed by GTM. In the following section we'll cover the basics and give a few examples of common use cases but this is no way covers the gamut of what can be done to collect custom data. It is always best to refer to your account manager and the support team to get recommendations on solving specific data collection challenges.

All of the following examples will assume you understand the basics of creating a new tag of type Custom HTML within GTM (steps 1 through 6 under Installing the Latest Lytics Tag), just be sure to name the new tag(s) something descriptive and relative to the action being taken such as "Pass form data to Lytics." In addition, for more information on collecting data with Lytics view our detailed JavaScript documentation.

Click Actions

In order to track clicks with GTM we'll need to configure a new Trigger.
From the side menu within GTM select Triggers.
Click New at the top right of the list of existing triggers.
Name your trigger something descriptive like "Clicked Picture of John Snow".
Click Trigger Configuration.
GTM has many pre-built triggers. For this example we'll use the All Elements option under Click.
Two additional options will appear. Select Some Clicks so that we can trigger based on the click of a specific element on the page.
In the first select menu that appears we'll select Choose Built-In Variable.

This contains several pre-built helpers such as listening for clicks on an element with a particular class, ID, etc.
For our example we'll assume our image of John Snow is implemented with the an id of gameOfThrones as shown here:
<img src="/john.png" id="gameOfThrones">
Select Click ID, which will allow us to trigger our tag only when a visitor clicks on elements with a specific ID.
Change the contains menu to equals as we'll be expecting an exact match.
In the empty space to the right of the equals menu type gameOfThrones or the ID that you are targeting.
Save the trigger at the top right.

Now that we have configured a trigger to listen for our specific action we can now tie that to a tag that sends Lytics information every time that action takes place.

After you have created a new tag and selected type of Custom HTML we'll configure the data sent and our trigger.
In our example we are going to pass a simple event that sends context of what the user clicked but this could be expanded to be full featured and dynamic. Paste the following snippet into the HTML text area:
```
// the following script sends and event for a user stating they have clicked a particular ID
<script>
    jstag.send({
        _e: "clicked: gameOfThrones"
    })
</script>
```
Under the *Triggering menu we'll then select our custom trigger we created in the initial steps.
Save the tag and publish.

Form Actions

Note: When it comes to collecting form data using the built-in GTM helpers is a great place to start. However, it is always best to refer to your Engineering resources to ensure what is being collected is correct, secure, etc. This is merely an example of what can be done rather than the recommended approach. That very much will change based on your unique architecture and use case.

Warning: Never collect/send secure data such as passwords, credit card numbers, etc. via this method.

In order to collect form data with GTM we'll need to configure a new Trigger.
From the side menu within GTM select Triggers.
Click New at the top right of the list of existing triggers.
Name your trigger something descriptive like "Submitted Fancy Form".
Click Trigger Configuration.
GTM has many pre-built triggers. For this example we'll use the Form Submission option under User Engagement.
Several additional options such as validation will appear. We will ignore those for this example but GTM offers a variety of helpers to ensure data collected is of high quality.
Select Some Forms so that we can only collect data from a specific form.
In the first select menu that appears we'll select Choose Built-In Variable.

This contains several pre-built helpers such as listening for clicks on an element with a particular class, ID, etc.

For our example we'll assume our form has an id of myFancyForm.
Select Form ID, which will allow us to trigger our tag only when a visitor clicks on elements with a specific ID.
Change the contains menu to equals as we'll be expecting an exact match.
In the empty space to the right of the equals menu type myFancyForm or the ID that you are targeting.
Save the trigger at the top right.

Now that we have configured a trigger to listen for our specific form submission we can now tie that to a tag that sends Lytics information every time that action takes place.

After you have created a new tag and selected type of Custom HTML we'll configure the data sent and our trigger.

In our example we are going to pass along one of the inputs within the form with the name firstName. Keep in mind that for your collected data to make it to user profiles the sent data must match what is mapped with LQL. Paste the following snippet into the HTML text area:

// the following script uses jquery to pull the specific value of an input with the name **firstName** within the **myFancyForm** form
// this is a basic example and there are countless more detailed examples online of how to convert form inputs into JSON
<script>
    jstag.send({
        firstName: $('#myFancyForm').find('input[name="firstName"]').val()
    })
</script>

Under the Triggering menu we'll then select our custom trigger we created in the initial steps.
Save the tag and publish.

Leveraging GTM Variables

GTM variables are very useful and make the actual collection of data far simpler though they take a bit of work to configure. In our form example above, instead of using jQuery to get the actual value of inputs those values are already passed to the GTM data layer upon submit. By creating a Variable mapping of that input you can refer to the variable in your tag as opposed to writing more custom JavaScript. Google has some great documentation to get you started. Likewise, by searching on Google for things like "collecting form data with GTM" you will get some great step by step walk throughs on how to configure these variables.

Additional Configuration Options

The Lytics JavaScript tag is highly customizable. For additional configuration options visit our JavaScript documentation.