20 Debug and Log to Browser Console | BCS

20 Debug and Log to Browser Console

Adobe Launch BCS 7 months ago (12-03) 153 Views 0 Comments

When we are done with the configuration and setup, we need to know if this is right or not, which requires testing. There are many tools and plugins for testing, such as the officially recommended Adobe Experience Cloud Debugger and Launch Switch, the Monitoring Hooks solution provided by Launch, and Tagtician provided by third parties.

Combining with 19 Click Tracking Implementation  from the previous section, suppose we have configured the click tracking, and now we need to test it. What should we do?

 

Adobe Experience Cloud Debugger

Here we directly demonstrate the simulation test, after publishing the library to the development environment, open the demo site, and then open the Adobe Experience Cloud Debugger:

20 Debug and Log to Browser Console

Then simulate the behavior that needs to be tracked, click “Adobe Launch Guide” and observe the Adobe Experience Cloud Debugger will show some data, Look for Events under Network:

20 Debug and Log to Browser Console

If the corresponding data can be found, it means that Rule is triggered, and it is normal.

If it is some page browsing data,  Clicks on the page but no jump occurs, you can also use the browser’s developer tools to check:

20 Debug and Log to Browser Console

Data like Adobe Experience Cloud Debugger can be found on the right. This is the data that Adobe tracks and sends. The way of developing tools through the browser is not suitable for testing events that have jumps, because the page is refreshed after clicking, and the time is too short, and you have no time to look at the data at all.

 

Launch and DTM Switch(Launch Switch)

You can enable debug mode in two ways:

One is to enter _satellite.setDebug (true) in the console, refresh it and you will see have the rocket emoji 🚀  This means turning on debug mode.

20 Debug and Log to Browser Console

The other is via the Launch Switch plugin directly on chrome,Through this extension, you can enable debug mode simply by toggling it on in the extension view:

20 Debug and Log to Browser Console

This way can open multiple environment types, all environment types in your launch can be found, such as development environment, stagging environment, production environment.

In both cases, debug mode is enabled. Then simulate the operation to see what is triggered and what data is sent:

20 Debug and Log to Browser Console

Here you can see more launch execution messages that can help you determine whether the rule is triggered, but you need to find the rule yourself. If there is no rule you are looking for, it means that it is not triggered and you need to modify the event in the rule.

Tagtician

This is also a plugin, Use the same way as Adobe Experience Cloud Debugger

20 Debug and Log to Browser Console

You can know what data is passed, similar to the previous plugin.

 

Monitoring Hooks

This method is provided by Adobe Launch, you need to add a piece of code before the launch library,This will allow the monitor to catch even the earliest system events that occur in the Launch library,The code to be added is as follows:

<span style="font-size: 12pt;"><script>
    window._satellite = window._satellite || {};
    window._satellite._monitors = window._satellite._monitors || [];
    window._satellite._monitors.push({
      ruleTriggered: function (event) {
        console.log(
          'rule triggered', 
          event.rule
        );
      },
      ruleCompleted: function (event) {
        console.log(
          'rule completed', 
          event.rule
        );
      },
      ruleConditionFailed: function (event) {
        console.log(
          'rule condition failed', 
          event.rule, 
          event.condition
        );
      }
    });
  </script>
</span>

The monitor object can specify the following methods, which will later be called by the Launch library at certain points in time:

  • ruleTriggered will be called after an event triggers a rule but before the rule’s conditions and actions have been processed. The event object passed to ruleTriggered will contain information about the rule that was triggered.
  • ruleCompleted will be called after a rule has been fully processed. In other words, the event has occurred, all conditions have passed, and all actions have executed. The event object passed to ruleCompleted will contain information about the rule that completed.
  • ruleConditionFailed will be called after a rule has been triggered and one of its conditions has failed. The event object passed to ruleConditionFailed will contain information about the rule that was triggered and the condition that failed.

As you might surmise, if ruleTriggered gets called, either ruleCompleted or ruleConditionFailed will be called shortly thereafter.

Let’s try how to use it. After deploying which piece of code, directly open the console of the developer tools of the browser, and then you can directly simulate the test, and you will see the following interface:

20 Debug and Log to Browser Console

It will prompt you which rules are triggered, what are the results of the trigger, success or failure. This is more convenient than the previous need to find out if the Rule is triggered by yourself.

More information can be read: https://medium.com/adobetech/launch-library-monitoring-hooks-c674d16deae3

 

Browser Developer Console

We can also use the developer console of the browser to test whether the relevant data elements have accurately obtained the value. After simulating the behavior that needs to be tracked, enter _satellite.getVar (“element”) directly in the console. The desired data element, such as the Page Name:

20 Debug and Log to Browser Console

 

If the value is out of stock, it is undefined.

 

To sum up: the test of Launch is mainly to see if the data is sent correctly, and since the data is sent, there is generally no data. Basically the Event setting in the Rule is incorrect, so you need to adjust it.

 


If you don't understand, You can leave a comment below or email me (haran.huang@ichdata.com).
Like (2)
Post my comment
Cancel comment
Expression Texture Bold Strikethrough Center Italic Sign in

Hi, you need to fill in your nickname and email!

  • Nickname (required)
  • Email (required)
  • Website