Pages

These practical examples show you how to to user triggers to:

Segmenting visitors based on modification clicks

This example shows you how to use a trigger to segment visitors based on the modifications they have clicked. This helps you to personalize the content shown to visitors based on their interests. This type of trigger is also useful when you want to see how a modification is performing or use click tracking to compare modification clicks to conversions.

In this example, visitors that click a modification with the ID "12345" will be segmented. You must first create a trigger to track modifications clicks, and then create a segment based on the trigger.

Creating the trigger

To create the trigger:

  1. In the Frosmo Control Panel, select Triggers.
  2. Click Create trigger.
  3. Enter the trigger name as "Modification click 12345".
  4. In Evaluation point, select Custom event.
  5. In Event, select Modification click. This means that the trigger is evaluated once the specified modification is clicked.
  6. Click Add new rule, click Event data, and set the trigger rule:

    The data value of the Modification ID event is exactly 12345.


    This means that the trigger is fired when a visitor clicks the modification with the ID "12345".

    Segmenting visitors based on modification clicks - Creating the trigger

  7. When you're done, click Save.

Creating the segment

To create a segment for visitors who click the modification:

  1. In the Control Panel, select Data Management > Segmentation > Segments.
  2. Click Create segment.
  3. Click Add new rule, click Trigger, and set the segment rule:

    The visitor has triggered Modification click 12345 more than equal to 1 times, with each trigger event counted.


    This means that in order to get segmented, the visitor must click the modification with the ID "12345" at least once. Every click is counted.

  4. Set the time limit based on the start and end date of your modification. The default time limit is 14 days.

    Segmenting visitors based on modification clicks - Creating the segment

  5. Select Description, and enter the segment name as "Clicked modification 12345". You can also enter a description to better remember what the segment is about.
  6. When you're done, click Save.

Segmenting visitors based on the device type they are using

This example shows you how to use a trigger to segment visitors based on the type of device they use (desktop, tablet, or mobile). Knowing the device type your visitors are using is crucial to be able to optimize the layout and content for different screen sizes.

In this example, visitors that browse the site using a desktop device will be segmented. You must first create a trigger to detect the device type, and then create a segment based on the trigger.

Creating the trigger

To create the trigger:

  1. In the Control Panel, select Triggers.
  2. Click Create trigger.
  3. Enter the trigger name as "Device desktop".
  4. In Evaluation point, select DOM ready.
  5. Click Add new rule, click JavaScript code, and set the trigger rule:

    The value of the

    String(easy.utils.isDesktop());

    JavaScript function is exactly true.


    This means that when all HTML elements have been loaded on the page, the JavaScript functions checks whether the visitor is using a desktop device. If so, the function returns "true", and the trigger is fired.

    Segmenting visitors based on the device type they are using - Creating the trigger

    The return value is Boolean so you must stringify the return value.

  6. When you're done, click Save.

Creating the segment

To create a segment for visitors who use a desktop device:

  1. In the Control Panel, select Data Management > Segmentation > Segments.
  2. Click Create segment.
  3. Click Add new rule, click Trigger, and set the segment rule:

    The visitor has triggered Device desktop more than equal to 1 times, with each trigger event counted.


    This means that in order to get segmented, the visitor must browse the site using a desktop device at least once. The trigger is evaluated on each page load.

  4. Set the time limit based on the start and end date of your modification. The default time limit is 14 days.

    Segmenting visitors based on the device type they are using - Creating the segment

  5. Select Description, and enter the segment name as "Using desktop device". You can also enter a description to better remember what the segment is about.
  6. When you're done, click Save.

Segmenting visitors based on their IP address

This example shows you how to use a trigger to identify visitors based on their IP address. You can then segment the visitors to show them content based on their location.

In this example, visitors whose IP address begins with "90.90" will be segmented. You must first create a trigger to detect the device type, and then create a segment based on the trigger.

Creating the trigger

To create the trigger:

  1. In the Control Panel, select Triggers.
  2. Click Create trigger.
  3. Enter the trigger name as "IP address 90.90".
  4. In Evaluation point, select Custom event.
  5. In Event, select Visitor location change. By default, the visitor's location is detected in the beginning of each visit.
  6. Click Add new rule, click Event data, and set the trigger rule:

    The data value of the IP address event begins with 90.90.


    This means that the trigger is fired when a visitor from an IP address beginning with "90.90" enters the site.

    Segmenting visitors based on their IP address - Creating the trigger

  7. When you're done, click Save.

Creating the segment

To create a segment for visitors who click the modification:

  1. In the Control Panel, select Data Management > Segmentation > Segments.
  2. Click Create segment.
  3. Select Add new rule, and select Trigger. Define the rule as follows:

    The visitor has triggered IP address 90.90 more than equal to 1 times, with each trigger event counted.


    This means that in order to get segmented, the visitor must enter the site from an IP address beginning with "90.90". Every visit is counted.

  4. Set the time limit based on the start and end date of your modification. The default time limit is 14 days.

    Segmenting visitors based on their IP address - Creating the segment

  5. Select Description, and enter the segment name as "Visited from IP address starting with 90.90". You can also enter a description to better remember what the segment is about.
  6. When you're done, click Save.

Displaying content based on the time and day with a cached modification

Cached modifications can decrease flickering when displaying large content items, such as banners. However, they have some limitations. For example, you can't define a cached modification to be displayed on specific hours of the day or specific days of the week. You can work around this limitation by binding a trigger to a placement that you then associate with a modification.

This example uses simple custom JavaScript for getting the time of the day as a rule for the trigger. The trigger is defined so that the modification is only displayed to visitors during the evening hours (6 p.m. to midnight). This is useful when you want to target audiences that typically make their purchasing decisions after office hours. You must also create a placement using the trigger to display the modification.

Creating the trigger

To create the trigger:

  1. In the Frosmo Control Panel, select Triggers.
  2. Enter the trigger name as "Evening 6pm-midnight".
  3. In Evaluation point, select DOM ready. This means that the trigger is evaluated once all HTML elements have been loaded on the page.
  4. Click Add new rule, click JavaScript code, and set the trigger rule:

    The value of the

    (function () {
     var hour = (new Date()).getHours();
     return String(hour > 18 && hour < 24);
    }());

    JavaScript function is exactly true.


    This means that when all HTML elements have been loaded on the page, the JavaScript functions checks whether the current time is between 18:00 and midnight. If so, the function returns "true", and the trigger is fired.

    Displaying content based on the time and day with a cached modification - Creating the trigger

    The return value is Boolean so you must stringify the return value.

  5. When you're done, click Save.

Creating the placement

To create the placement:

  1. In the Control Panel, select Modifications > Placements.
  2. Select Create placement.
  3. Define the following settings:

    • Name: Enter a descriptive name, such as "Front page - banner - evening".
    • Target element: Select CSS selector, and enter the value "#banner-top" (or whatever is the selector for the target element on your site).
    • Display method: Select Replace content. This means that the modification content replaces the original content of the target element.
    • URL matcher: Click Add new rule, and define the attribute as Page path is exactly /?product_cat=frosmo-pets (or whatever page you want to display the modification).

  4. Click  Select trigger.

  5. In the triggers list, select the trigger you created earlier ("Evening 6pm-midnight"), and click Select.

  6. When you're done, click Save.

Using the trigger in a modification

To use the trigger in a cached modification:

  1. In the Control Panel, select Modifications > Overview, and select the modification to which you want to attach the trigger.
  2. Select Display Options.
  3. Select the placement you created.
  4. When you're done, click Save.

Displaying content to visitors changing the shopping cart contents

Triggers allow you to show content based directly on a visitor's action on the page or site without creating a segment related to the action. You can use triggers to detect events immediately when they happen, whereas segmentation is only implemented at each new page load.

In this example, when a visitor changes the contents of their shopping cart (adding or removing items), a trigger is fired to change the content displayed on the page. You can use this solution to, for example, upsell products or declare that a campaign is ending soon. You must also create a placement using the trigger to display the modification.

Creating the trigger

To create the trigger:

  1. In the Control Panel, select Triggers.
  2. Click Create trigger.
  3. Enter the trigger name as "Shopping cart content changed".
  4. In Evaluation point, select Custom event.
  5. In Event, select Other predefined event. Enter the event name as "TRIGGER_CART_LINK_DESKTOP".

    Displaying content to visitors changing the shopping cart contents - Creating the trigger

    This means that you can show the modification using the frosmo.easy.events.trigger('TRIGGER_CART_LINK_DESKTOP') function.

  6. When you're done, click Save.

Creating the placement

To create the placement:

  1. In the Control Panel, select Modifications > Placements.
  2. Select Create placement.
  3. Define the following settings:

    • Name: Enter a descriptive name, such as "Shopping cart - after product list - campaign countdown".
    • Target element: Select CSS selector, and enter the value ".site-cart-product-list" (or whatever is the selector for the target element on your site).
    • Display method: Select After element. This means that the modification content is displayed below the original content of the target element.

  4. Click Select trigger.

  5. In the triggers list, select the trigger you created earlier ("Shopping cart content changed"), and click Select.

  6. When you're done, click Save.

Using the trigger in a modification

To use the trigger in a cached modification:

  1. In the Control Panel, select Modifications > Overview, and select the modification to which you want to attach the trigger.
  2. Select Display Options.
  3. Select the placement you created.
  4. When you're done, click Save.
  • No labels