Difference between revisions of "ATC/Current/SDK/autotrackInViewport"
From Genesys Documentation
m (Text replacement - "\|Platforms?=([^\|]*)PureEngage([\|]*)" to "|Platform=$1GenesysEngage-onpremises$2") |
m (Text replacement - "Genesys Cloud" to "Genesys Cloud CX") |
||
(7 intermediate revisions by 2 users not shown) | |||
Line 3: | Line 3: | ||
|DisplayName=autotrackInViewport | |DisplayName=autotrackInViewport | ||
|TocName=autotrackInViewport | |TocName=autotrackInViewport | ||
− | |Context=Learn how to configure which element {{MINTYDOCSPRODUCT}} tracks on your websites as they appear and disappear from the viewport | + | |Context=Learn how to configure which element {{MINTYDOCSPRODUCT}} tracks on your websites as they appear and disappear from the viewport. This configuration provides accurate page tracking information for use in segments and outcomes. |
|Dimension=Modules | |Dimension=Modules | ||
|ComingSoon=No | |ComingSoon=No | ||
− | |Platform=GenesysEngage- | + | |Platform=PureConnect, GenesysCloud, GenesysEngage-cloud |
− | |||
|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 | ||
− | + | |structuredtext=The <code>autotrackInViewport</code> module tracks when an element becomes visible in the viewport or disappears from the viewport. To use <code>autotrackInViewport</code>, configure the elements to track using the following options: | |
− | |||
− | |structuredtext=The <code>autotrackInViewport</code> module tracks when an element becomes visible in the viewport or disappears from the viewport. To use <code>autotrackInViewport</code>, | ||
*{{Link-SomewhereInThisVersion|manual=SDK|topic=autotrackInViewport|anchor=Config|display text=Config}} | *{{Link-SomewhereInThisVersion|manual=SDK|topic=autotrackInViewport|anchor=Config|display text=Config}} | ||
*{{Link-SomewhereInThisVersion|manual=SDK|topic=autotrackInViewport|anchor=Callback|display text=Callback}} | *{{Link-SomewhereInThisVersion|manual=SDK|topic=autotrackInViewport|anchor=Callback|display text=Callback}} | ||
− | |||
− | |||
|Status=No | |Status=No | ||
}}{{Section | }}{{Section | ||
Line 25: | Line 24: | ||
|anchor=Signature | |anchor=Signature | ||
|alignment=Vertical | |alignment=Vertical | ||
− | |||
− | |||
|structuredtext=<br /><syntaxhighlight lang="javascript"> | |structuredtext=<br /><syntaxhighlight lang="javascript"> | ||
ac('load', 'autotrackInViewport', config, [callback]); | ac('load', 'autotrackInViewport', config, [callback]); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | |||
− | |||
|Status=No | |Status=No | ||
}}{{Section | }}{{Section | ||
Line 37: | Line 32: | ||
|anchor=Example | |anchor=Example | ||
|alignment=Vertical | |alignment=Vertical | ||
− | |||
− | |||
|structuredtext=<syntaxhighlight lang="javascript"> | |structuredtext=<syntaxhighlight lang="javascript"> | ||
ac('load', 'autotrackInViewport', { | ac('load', 'autotrackInViewport', { | ||
Line 49: | Line 42: | ||
}); | }); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | |||
− | |||
|Status=No | |Status=No | ||
}}{{Section | }}{{Section | ||
Line 56: | Line 47: | ||
|anchor=Config | |anchor=Config | ||
|alignment=Vertical | |alignment=Vertical | ||
− | + | |structuredtext='''Description:''' Identifies an array of elements to track. | |
− | |||
− | |structuredtext=Description: | ||
− | Type: | + | '''Type:''' Object |
− | Properties: | + | '''Properties:''' See the following table. |
{{{!}} class="wikitable" role="grid" | {{{!}} class="wikitable" role="grid" | ||
! class="confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted" data-column="0" scope="col" role="columnheader" aria-label="Name: No sort applied, activate to apply an ascending sort" tabindex="0" aria-disabled="false" unselectable="on" aria-sort="none"{{!}}Name | ! class="confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted" data-column="0" scope="col" role="columnheader" aria-label="Name: No sort applied, activate to apply an ascending sort" tabindex="0" aria-disabled="false" unselectable="on" aria-sort="none"{{!}}Name | ||
Line 70: | Line 59: | ||
{{!}}- role="row" | {{!}}- role="row" | ||
{{!}} class="confluenceTd"{{!}}selector | {{!}} class="confluenceTd"{{!}}selector | ||
− | {{!}} class="confluenceTd"{{!}} | + | {{!}} class="confluenceTd"{{!}}String that selects elements. For more information, see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches |
{{!}} class="confluenceTd"{{!}}String | {{!}} class="confluenceTd"{{!}}String | ||
{{!}} class="confluenceTd"{{!}}required | {{!}} class="confluenceTd"{{!}}required | ||
{{!}}- role="row" | {{!}}- role="row" | ||
{{!}} class="confluenceTd"{{!}}eventName | {{!}} class="confluenceTd"{{!}}eventName | ||
− | {{!}} class="confluenceTd"{{!}} | + | {{!}} class="confluenceTd"{{!}}String used as the event name when an element matching the selector moves into or outside the viewport. |
{{!}} class="confluenceTd"{{!}}String | {{!}} class="confluenceTd"{{!}}String | ||
{{!}} class="confluenceTd"{{!}}required | {{!}} class="confluenceTd"{{!}}required | ||
Line 89: | Line 78: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | |||
− | |||
|Status=No | |Status=No | ||
}}{{Section | }}{{Section | ||
Line 96: | Line 83: | ||
|anchor=callback | |anchor=callback | ||
|alignment=Vertical | |alignment=Vertical | ||
− | + | |structuredtext=When a module loads, callback is executed. No arguments pass to the callback. | |
− | |||
− | |structuredtext=When a module | ||
− | |||
− | |||
|Status=No | |Status=No | ||
}} | }} | ||
}} | }} |
Latest revision as of 21:28, November 9, 2021
This topic is part of the manual Journey JavaScript SDK for version Current of Genesys Predictive Engagement.
Learn how to configure which element Genesys Predictive Engagement tracks on your websites as they appear and disappear from the viewport. This configuration provides 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 autotrackInViewport
module tracks when an element becomes visible in the viewport or disappears from the viewport. To use autotrackInViewport
, configure the elements to track using the following options:
Signature
ac('load', 'autotrackInViewport', config, [callback]);
Example
ac('load', 'autotrackInViewport', {
inViewportEvents: [
{ selector: 'button.bg-green', eventName: 'green_button_element' },
{ selector: 'footer *', eventName: 'footer_element' }
]
}, function () {
console.log('"autotrackInViewport" has been loaded');
});
Config (required)
Description: Identifies an array of elements 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 moves into or outside the viewport. | String | required |
Example
{
inViewportEvents: [
{ selector: 'button.bg-green', eventName: 'green_button_element' },
{ selector: 'footer', eventName: 'footer_element' }
]
}
Callback
When a module loads, callback is executed. No arguments pass to the callback.
Comments or questions about this documentation? Contact us for support!