How to choose modules and insert tracking code
Learn the different ways of choosing modules and inserting tracking code. Check how it works after the launching of email.
Basics
Each email can be divided into several logical horizontal modules in different ways. It depends on the goals of the tracking. All recordings and statistics will depend on this choice. Here are several examples of the dividing of the same email:

  1. 4 modules. Tracking of big parts of the email.
  2. 8 modules. Tracking of each logical element of email.
  3. 11 modules. Tracking of each element of email.

You need to take into account several things:

  1. The process of choosing and tracking modules closely depends on td modules. You can't track something if it is not placed inside of td tag.
  2. You may track several td modules as one module with the help of tracking code. We'll show it below.
  3. Usually, an email contains two areas: area with content and area around the content. Let's take for example previous HTML email to show these areas. Some users scroll emails only in the content area, and some in both, and some only in the area around the content. Below we show how to detect all groups of users.
  4. During campaign set up, you will need to type the number of modules in email. This number will equal the number of modules you are going to track inside of the content area. If you need to combine some td modules in one with the help of tracking code, you should count it as one. For example, this email contains 11 horizontal td modules of the same level. But you should type number "4" during campaign set up because you are going to track 4 modules and all 11 td modules will be combined in 4 with the help of tracking code.

The basic algorithm for choosing and tracking modules is the next:

  1. Choosing modules in the rendered email and saving information about chosen modules by screenshot system. It will help you with module analytics.
  2. Finding, modifying, or creating td modules depending on the first step. Typing the number of modules you are going to track at the first step of campaign setup.
  3. Getting the tracking code at the second step of the campaign setup and inserting it in your email.
  4. Inserting HTML code with tracking code in the form at the third step of campaign setup.
Let's go through this algorithm with our example.
1. Choosing modules in the rendered email
Let's take our previous example and choose each logical element of email for tracking. We've chosen 8 modules for tracking. After that, we need to explore the HTML code of this email in order to prepare td modules for tracking.
2. Finding, modifying, or creating td modules
Firstly you need to check available horizontal td modules for tracking (2.1). If they don't cover all the areas of email in the content area you can modify them, usually by changing paddings (2.2). If you want to detect both groups of users who scroll inside and outside of the content area you need to create additional td modules (2.3).
2.1 Finding available td modules in HTML
Let's explore our email. Below we highlight by borders available td modules in rendered email. Also we highlight these modules in the code by the comments like these:

<!--- Beginning of td module 1 --->
...
<!--- End of td module 1 --->

See the Pen Available td modules by Iurii (@Iurii-Kan) on CodePen.

As far as you see these modules don't cover all the content area of email. It means that if users will scroll in the left or right part of the content area which is not included in these td modules such actions will not be tracked.
2.2 Modifying available td modules in HTML
To have td modules which cover all content area, we need to change their paddings. We highlight modified modules in the code by the comments like these: 

<!--- Beginning of td module 1 --->
...
<!--- End of td module 1 --->

See the Pen Choosing of modules inside of the content area by Iurii (@Iurii-Kan) on CodePen.

There are 11 single modules, but we'll need to merge some of modules. We'll show how to do it in the section about inserting of tracking code.
2.3 Creating additional td modules in HTML
Usually, an email contains two areas: area with content and area around the content. Let's take for example our HTML email to show these areas. Some users scroll emails in the first area and some in the second. Previous examples allowed us to detect users who scroll email only in the content area.

If you want to detect both groups of users who scroll inside and outside of content area you need to make tables with td blocks in the right and left side of the area with content. These td blocks should have the same heights as chosen td blocks in the content area. Let's change the email to detect users who scroll inside and outside of content area. We highlight chosen modules outside of the content area in the left part of the email in the code by the comments like these:

<!--- Beginning of td module 1 left --->
...
<!--- End of td module 1 left --->
We highlight chosen modules in the content area of the email in the code by the comments like these:

<!--- Beginning of td module 1 --->
...
<!--- End of td module 1 --->
We highlight chosen modules outside of the content area in the right part of the email in the code by the comments like these:

<!--- Beginning of td module 1 right --->
...
<!--- End of td module 1 right --->

See the Pen Choosing of modules inside and outside of the content area by Iurii (@Iurii-Kan) on CodePen.

3. Inserting of the tracking code
You need to properly insert a tracking code, which you'll see on the second step of the campaign set up to get the right results. The process of inserting tracking code will be slightly different for the option where you track modules only inside of the content area and the option where you track modules inside and outside of the content area.
3.1 Tracking of modules inside of the content area
Firstly you need to determine given CSS classes in the style's area. After that, you need to put a tracking pixel at the top of the email.

Then you need to set up a CSS class for each td tag of each module, which you are going to track. You should put the first line in the first module, the second line in the second module, etc. If you want to combine some td modules you need to set up the same CSS class for each of the combined td modules. We highlight chosen modules by the comments like these: 

<!--- Beginning of module 1 --->
...
<!--- End of module 1 --->
Please check modules 2, 8 - they contain several combined td modules:

See the Pen Tracking of modules inside of the content area by Iurii (@Iurii-Kan) on CodePen.

3.2 Tracking of modules inside and outside of the content area
Firstly you need to do all the steps which are described in the previous option. After that, you should set up a CSS class for each td tag of each module, which you are going to track in the left table and right table outside of the content area in the same way as you did in the content area:

See the Pen Tracking of modules inside and outside of the content area by Iurii (@Iurii-Kan) on CodePen.

Once you inserted the tracking code in HTML don't forget to put it in the form at the 3rd step of the campaign set up.

We recommend making screenshots with the number of modules like here. It will help you to check modules analytics and associate numbers with each module. You may use the Monosnap program for it.
How does the tracking work
Once a user stops the mouse or trackpad arrow on the tracked module our tool gets information about it and saves it in the database. It saves only the first stop on the module, that's why recording shows how users watch modules for the first time and don't show the second reading of the module.

© All Right Reserved. EMclimb.
Made on
Tilda