Difference between revisions of "ATC/Current/SDK/autotrackClick"

From Genesys Documentation
Jump to: navigation, search
(Published)
 
 
(9 intermediate revisions by 3 users not shown)
Line 3: Line 3:
 
|DisplayName=autotrackClick
 
|DisplayName=autotrackClick
 
|TocName=autotrackClick
 
|TocName=autotrackClick
|Context=Learn how to configure which click events {{MINTYDOCSPRODUCT}} tracks on your websites, so you have more accurate page tracking information for use in segments and outcomes.
+
|Context=Learn how to configure which click events {{MINTYDOCSPRODUCT}} tracks on your websites. This configuration provides more accurate page tracking information for use in segments and outcomes.
 
|Dimension=Modules
 
|Dimension=Modules
 
|ComingSoon=No
 
|ComingSoon=No
|Prereq=
 
 
|Section={{Section
 
|Section={{Section
 +
|alignment=Vertical
 +
|structuredtext={{NoteFormat|1=This article only applies to customers using {{Link-AnywhereElse|product=ATC|version=Current|manual=AdminGuide|topic=About_web_chats|display text=web chat}}. If you are a Genesys Cloud CX customer, we encourage you to use the new {{Link-AnywhereElse|product=ATC|version=Current|manual=AdminGuide|topic=About_web_messaging|display text=web messaging}} feature to replace web chat.|2=}}<br />
 +
|Status=No
 +
}}{{Section
 
|sectionHeading=Description
 
|sectionHeading=Description
 
|anchor=Description
 
|anchor=Description
 
|alignment=Vertical
 
|alignment=Vertical
|Media=
+
|structuredtext=The <code>autotrackClick</code> module tracks when and where a visitor clicks on a webpage. To use <code>autotrackClick</code>, configure the click events to track using the following options:
|image=
 
|structuredtext=The <code>autotrackClick</code> module tracks when and where a user clicks on a webpage. To use <code>autotrackClick</code>, use the following options to configure the click events that you want to track:
 
  
 
*{{Link-SomewhereInThisVersion|manual=SDK|topic=autotrackClick|anchor=Config|display text=Config}}
 
*{{Link-SomewhereInThisVersion|manual=SDK|topic=autotrackClick|anchor=Config|display text=Config}}
 
*{{Link-SomewhereInThisVersion|manual=SDK|topic=autotrackClick|anchor=Callback|display text=Callback}}
 
*{{Link-SomewhereInThisVersion|manual=SDK|topic=autotrackClick|anchor=Callback|display text=Callback}}
|structuredtextwide=
 
|FAQHeading=
 
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
Line 24: Line 23:
 
|anchor=Signature
 
|anchor=Signature
 
|alignment=Vertical
 
|alignment=Vertical
|Media=
 
|image=
 
 
|structuredtext=<syntaxhighlight lang="java">
 
|structuredtext=<syntaxhighlight lang="java">
  
 
ac('load', 'autotrackClick', config, [callback]);
 
ac('load', 'autotrackClick', config, [callback]);
 
</syntaxhighlight><br />
 
</syntaxhighlight><br />
|structuredtextwide=
 
|FAQHeading=
 
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
Line 37: Line 32:
 
|anchor=Example
 
|anchor=Example
 
|alignment=Vertical
 
|alignment=Vertical
|Media=
 
|image=
 
 
|structuredtext=<syntaxhighlight lang="java">
 
|structuredtext=<syntaxhighlight lang="java">
 
ac('load', 'autotrackClick', {
 
ac('load', 'autotrackClick', {
Line 49: Line 42:
 
});
 
});
 
</syntaxhighlight>
 
</syntaxhighlight>
|structuredtextwide=
 
|FAQHeading=
 
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
Line 56: Line 47:
 
|anchor=Config
 
|anchor=Config
 
|alignment=Vertical
 
|alignment=Vertical
|Media=
+
|structuredtext='''Description:''' Identifies an array of click events to track.  
|image=
 
|structuredtext=Description: identifies an array of click events that should be tracked.  
 
  
Type: object
+
'''Type:''' Object
  
Properties:  
+
'''Properties:''' See the following table.
 +
{{{!}} class="wikitable"
 +
{{!}}+
 +
!Name
 +
!Description
 +
!Type
 +
!Status
 +
{{!}}-
 +
{{!}}selector
 +
{{!}}String that selects elements. For more information, see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
 +
{{!}}String
 +
{{!}}required
 +
{{!}}-
 +
{{!}}eventName
 +
{{!}}String used as the event name when an element matching the selector is clicked.
 +
{{!}}String
 +
{{!}}required
 +
{{!}}-
 +
{{!}}customAttributes
 +
{{!}}Field used to send additional information when the selector is clicked. The field can be set with static, predetermined values. Once the autotrackClick module initiates, the value that is available in the value field is applied for the rest of the session. The value cannot be changed dynamically according to user action. There can be more than one field.<br />
 +
{{!}}Object
 +
{{!}}optional
 +
{{!}}}
 +
====Example====
 +
To create an event to track the number of clicks on the green button, use the customAttributes as follows:<syntaxhighlight lang="javascript">
 +
{
 +
  clickEvents: [
 +
    { selector: 'button.bg-green', eventName: 'green_button_clicked', customAttributes: {clickValue: 100, name: Insurance},
 +
    { selector: 'footer *', eventName: 'footer_clicked' }
 +
  ]
 +
}
 +
</syntaxhighlight>
 +
====Use events to track outcome value====
 +
Use the attributes within the autotrackClick SDK to {{Link-SomewhereInThisVersion|manual=AdminGuide|topic=Manage_outcomes|display text=track an outcome}} from {{Link-SomewhereInThisVersion|manual=AdminGuide|topic=About_action_maps|display text=action maps}}. You can further use the value set within the SDK to the define the value of the outcome. In this example, the value of a click is set at 100. This means that if the value of the outcome stands at 1000, the total number of clicks is 10 with a total value of 1000.
 +
|Status=No
 +
}}{{Section
 +
|sectionHeading=AI-400 Config (required)
 +
|anchor=outcome_value_tracker
 +
|alignment=Vertical
 +
|structuredtext=*AI-400 - Replace above section with following text for GA:
 +
*Add first row to all autotrack events - without example.
  
 +
 +
'''Description:''' Identifies an array of click events to track.
 +
 +
'''Type:''' Object
 +
 +
'''Properties:''' See the following table.
 
{{{!}} class="wikitable"
 
{{{!}} class="wikitable"
 
{{!}}+
 
{{!}}+
Line 72: Line 107:
 
{{!}}-
 
{{!}}-
 
{{!}}selector
 
{{!}}selector
{{!}}A string that selects elements. For more information, see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+
{{!}}String that selects elements. For more information, see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
 
{{!}}String
 
{{!}}String
 
{{!}}required
 
{{!}}required
 
{{!}}-
 
{{!}}-
 
{{!}}eventName
 
{{!}}eventName
{{!}}is a string that will be used as the event name when an element matching the selector is clicked.
+
{{!}}String used as the event name when an element matching the selector is clicked.
 
{{!}}String
 
{{!}}String
 
{{!}}required
 
{{!}}required
 +
{{!}}-
 +
{{!}}customAttributes
 +
{{!}}Field used to send additional information when the selector is clicked. The field can be set with static, predetermined values. Once the autotrackClick module initiates, the value that is available in the value field is applied for the rest of the session. The value cannot be changed dynamically according to user action. There can be more than one field.
 +
 +
<br />
 +
{{!}}Object
 +
{{!}}optional
 
{{!}}}
 
{{!}}}
 
====Example====
 
====Example====
<syntaxhighlight lang="javascript">
+
To create an event to track the number of clicks on the green button, use the customAttributes as follows:<syntaxhighlight lang="javascript">
 
{
 
{
 
   clickEvents: [
 
   clickEvents: [
     { selector: 'button.bg-green', eventName: 'green_button_clicked' },
+
     { selector: 'button.bg-green', eventName: 'green_button_clicked', customAttributes: {clickValue: 100, name: Insurance},
 
     { selector: 'footer *', eventName: 'footer_clicked' }
 
     { selector: 'footer *', eventName: 'footer_clicked' }
 
   ]
 
   ]
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
|structuredtextwide=
+
 
|FAQHeading=
+
====Use events to track outcome value====
|Status=No
+
Use the attributes within the autotrackClick SDK to {{Link-SomewhereInThisVersion|manual=AdminGuide|topic=Manage_outcomes|display text=track an outcome}} from {{Link-SomewhereInThisVersion|manual=AdminGuide|topic=About_action_maps|display text=action maps}}. You can further use the value set within the SDK to the define the value of the outcome. In this example, the value of a click is set at 100. This means that if the value of the outcome stands at 1000, the total number of clicks is 10 with a total value of 1000.
 +
|Status=Yes
 
}}{{Section
 
}}{{Section
 
|sectionHeading=Callback (optional)
 
|sectionHeading=Callback (optional)
 
|anchor=Callback
 
|anchor=Callback
 
|alignment=Vertical
 
|alignment=Vertical
|Media=
+
|structuredtext=When a module loads, callback is executed. No arguments pass to the callback.
|image=
 
|structuredtext=When a module fully loads, callback is executed. No arguments are passed to the callback.
 
|structuredtextwide=
 
|FAQHeading=
 
 
|Status=No
 
|Status=No
 
}}
 
}}
 
}}
 
}}

Latest revision as of 13:00, September 20, 2022

This topic is part of the manual Journey JavaScript SDK for version Current of Genesys Predictive Engagement.

Learn how to configure which click events Genesys Predictive Engagement tracks on your websites. This configuration provides more accurate page tracking information for use in segments and outcomes.

Important
This article only applies to customers using web chat. If you are a Genesys Cloud CX customer, we encourage you to use the new web messaging feature to replace web chat.

Description

The autotrackClick module tracks when and where a visitor clicks on a webpage. To use autotrackClick, configure the click events to track using the following options:

Signature

ac('load', 'autotrackClick', config, [callback]);

Example

ac('load', 'autotrackClick', {
  clickEvents: [
    { selector: 'button.bg-green', eventName: 'green_button_clicked' },
    { selector: 'footer *', eventName: 'footer_clicked' }
  ]
}, function () {
    console.log('"autotrackClick" has been loaded');
});

Config (required)

Description: Identifies an array of click events to track.

Type: Object

Properties: See the following table.

Name Description Type Status
selector String that selects elements. For more information, see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches String required
eventName String used as the event name when an element matching the selector is clicked. String required
customAttributes Field used to send additional information when the selector is clicked. The field can be set with static, predetermined values. Once the autotrackClick module initiates, the value that is available in the value field is applied for the rest of the session. The value cannot be changed dynamically according to user action. There can be more than one field.
Object optional

Example

To create an event to track the number of clicks on the green button, use the customAttributes as follows:
{
  clickEvents: [
    { selector: 'button.bg-green', eventName: 'green_button_clicked', customAttributes: {clickValue: 100, name: Insurance},
    { selector: 'footer *', eventName: 'footer_clicked' }
  ]
}

Use events to track outcome value

Use the attributes within the autotrackClick SDK to track an outcome from action maps. You can further use the value set within the SDK to the define the value of the outcome. In this example, the value of a click is set at 100. This means that if the value of the outcome stands at 1000, the total number of clicks is 10 with a total value of 1000.

AI-400 Config (required)

  • AI-400 - Replace above section with following text for GA:
  • Add first row to all autotrack events - without example.


Description: Identifies an array of click events to track.

Type: Object

Properties: See the following table.

Name Description Type Status
selector String that selects elements. For more information, see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches String required
eventName String used as the event name when an element matching the selector is clicked. String required
customAttributes Field used to send additional information when the selector is clicked. The field can be set with static, predetermined values. Once the autotrackClick module initiates, the value that is available in the value field is applied for the rest of the session. The value cannot be changed dynamically according to user action. There can be more than one field.


Object optional

Example

To create an event to track the number of clicks on the green button, use the customAttributes as follows:
{
  clickEvents: [
    { selector: 'button.bg-green', eventName: 'green_button_clicked', customAttributes: {clickValue: 100, name: Insurance},
    { selector: 'footer *', eventName: 'footer_clicked' }
  ]
}

Use events to track outcome value

Use the attributes within the autotrackClick SDK to track an outcome from action maps. You can further use the value set within the SDK to the define the value of the outcome. In this example, the value of a click is set at 100. This means that if the value of the outcome stands at 1000, the total number of clicks is 10 with a total value of 1000.

Callback (optional)

When a module loads, callback is executed. No arguments pass to the callback.

Retrieved from "https://all.docs.genesys.com/ATC/Current/SDK/autotrackClick (2024-07-27 23:24:28)"
Comments or questions about this documentation? Contact us for support!