DX Cloud Tags – Quick Start Guide
This document gives an example of using the Instart web portal to view tag analytics and create and manage rules to control loading of resources in the browser. Further examples of other use cases – protecting cookies from being read and/or written by other scripts, and sending email alerts if, for example, a script starts taking longer than a specified – are available in the DX Cloud Tags – Rule Building Cookbook.
The Tag Analytics & Control screens are accessed from the left navigation panel of the portal:
Quick start example
In this example we will focus on a specific page of the Instart public website – the company page – that we've noticed seems to load somewhat more slowly than we'd like. We use the portal to look at some of the tag analysis screens and see if we can see anything to explain it.
Use the Analysis screens to investigate
We open the Domain Analysis screen and scroll down to the Domain Level Activity data:
Hmmm.... the fourth line shows something that is taking an inordinate time to load, so nothing aside from some code from instartlogic.com, Blue Triangle, and Google loads until after it's done. We switch to the Object Level Detail - Graph view:
addthis_widget.js is taking almost 500 msec to load. Maybe if we could load it after Avg Time to DOM Content Loaded (the blue vertical line in the waterfall), which appears to be averaging around 2500 msecs, the page performance would improve.
Create a Tag Control rule to address the situation
So we switch to the Rules screen to create a rule to defer the loading of this tag:
- Let's start with entering a bried description for the rule. (A description is required; you can't save a rule without one.)
- Next, click on the pulldown labeled What do you want to do?
- The choices are Identify App, which is the first step towards creating a rule to either protect a cookie from access by specific scripts, or delay loading of specific resources, or Set Up Alert, which allows you to specify alert conditions for resources from a specific third-party domain. For our current purpose we choose Identify App. This opens up the Identify App section and moves the What do you want to do? pulldown down in the page:
- To create our rule, we next need to set some criteria to specify the app we intend to set up our rule for. We look at the Criteria pulldown to see what our choices are:
- We choose Path and then specify the path of the page we noticed the slowness with:
- Now we look at the pulldown labeled What do you want to do?
- We choose Delay Resource Load. This opens up the Delay Resource Load section and again moves the What do you want to do? pulldown down in the page:
- FIrst, we need to select something to specify the tag we want to defer. We know its name, so we choose Path and enter
addthis_widget.jsin the Path field:
- OK, we've specified the affected app and the script we want to defer… next we need to specify which event to defer the loading of this script until. In this case we're going to have it load after the DOM Content Loaded event:
- Then we click Save at the bottom of the rule. A Change Reason dialog box appears, so we add a note about why we are creating this rule and click Submit.
Now that our rule has been created, it takes about 5-10 minutes to be validated and deployed. After it's been in play for a while and had a chance to be triggered, information about the rule's action will become visible in the Action Analytics screen. This should happen after about 15-20 minutes have passed. We can take another look at the company page and see if it appears to load faster.