Scenario: Engage visitors who scroll to the bottom of a page

Scenario

You created a webpage announcing a new product. You want to create a segment of those visitors who view the entire page and start an interaction with them.

Summary of steps

  1. Use JavaScript to create a ScrollToBottom event tag.
  2. Deploy your event tag with your preferred tag manager.
  3. Create a segment that uses the event tag.
  4. Create an action map to engage your visitors.
  5. Test your solution in Live Now.

Create a ScrollToBottom event tag

In your preferred code editor, develop and validate a ScrollToBottom event tag.

If you deployed the Predictive Engagement tracking snippet, use the following example to create a ScrollToBottom event tag.

<script>ac('dom', 'ready', function() {    $(window).scroll(function(){        timeout = setTimeout( function() {            if( $(window).scrollTop() + $(window).height() > $(document).height() - 100 ) {                ac('record', 'scrollToBottom', 'User scrolled to bottom');                console.log('User scrolled to bottom');            }        })    })})</script>

For more information about the available Journey JavaScript methods you can use to create event tags, see the Journey JavaScript SDK.

Messenger snippet

If you are a Genesys Cloud CX customer and you deployed the Messenger snippet, use the following example to create a ScrollToBottom event tag. 
<script>  Genesys("subscribe", "Journey.ready", function(){    $(window).scroll(function(){        timeout = setTimeout( function() {            if( $(window).scrollTop() + $(window).height() > $(document).height() - 100 ) {                Genesys("command", "Journey.record", { eventName: "scrollToBottom"});                console.log('User scrolled to bottom');            }        }    }})</script>

For more information about the available plugins and their associated commands and events, see Commands and events in the Genesys Cloud CX Developer Center.

Deploy the event tag

Deploy your event tag using your preferred tag manager:

Note: The JavaScript code that you define for an event tag runs every time a visitor is on a page that matches the run condition defined for the tag (either the specific page URL or the presence of an HTML element).

Create a ScrollToBottom segment

  1. In Genesys Cloud CX Admin, create a segment.
  2. Under Visitor Journey, click Add first event.
  3. In the Session type box, click Web.
  4. In the Event Details box, click event action.
  5. In the Attribute box, click name.
  6. In the Operator box, click equals.
  7. In the Value box, type the name for your tag as you defined it in your ac('record') or Journey.record call and then click the checkmark.
Note: You must create a Web session type. Do not use the Custom session type.

Create a ScrollToBottom action map

  1. In Genesys Cloud CX Admin, create an action map.
  2. Name the action map ScrollToBottom.
  3. In the Select trigger section, click Segment match.
  4. Click Show details and then click Select segments.
  5. In the Select segments dialog box, select the ScrollToBottom segment.
  6. Configure the rest of the action map as needed and then save it.

Test your solution in Live Now

  1. Open Live Now.
  2. Open your website.
  3. Start a visit and go to the page that you are tracking.
  4. Scroll to the bottom.
  5. Refresh Live Now and verify that a new visitor appears and that the visitor was added to the ScrolltoBottom segment.