{"id":150400,"date":"2023-07-10T11:43:56","date_gmt":"2023-07-10T15:43:56","guid":{"rendered":"https:\/\/optinmonster.com\/?post_type=optinmonster_docs&p=150400"},"modified":"2025-08-26T09:21:53","modified_gmt":"2025-08-26T13:21:53","slug":"how-to-use-optinmonsters-javascript-variables-rule","status":"publish","type":"optinmonster_docs","link":"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-javascript-variables-rule\/","title":{"rendered":"How to Use OptinMonster’s JavaScript Variables Rule"},"content":{"rendered":"\n

OptinMonster makes it easy to hide or show campaigns based on a JavaScript variable in the page the campaign is loading on.<\/p>\n\n\n\n

In this article, you’ll learn how to use OptinMonster’s Display Rules to hide or show a campaign based on a JavaScript variable.<\/p>\n\n\n\n

\n
\n

Before you start<\/em><\/strong>, this feature is available with a Pro and higher subscription<\/a>.<\/p>\n<\/div>\n<\/div>\n\n\n\n

The JavaScript variable needs to be declared on a global scope<\/strong><\/em> (ie. window.customJSVariable<\/code>), or it will not be detected.<\/p>\n\n\n\n

Configure JavaScript Variables Rule<\/h2>\n\n\n\n

When you create a campaign<\/a> in OptinMonster you can configure it to be shown or hidden based on a JavaScript variable in the page.<\/p>\n\n\n\n

To configure the JavaScript variables rule, follow these steps:<\/p>\n\n\n\n

    \n
  1. Navigate to the Display Rules<\/strong> view in the campaign builder.
    \"Navigate<\/li>\n\n\n\n
  2. Next, when adding or editing a rule select Who (Personalization)<\/strong> from the left-hand list and select the JavaScript Variable Targeting<\/strong> option.
    \"Select<\/li>\n\n\n\n
  3. Configure the rule as desired using the operator dropdowns, and key<\/strong> and value<\/strong> fields.
    \"Configure
    The following options are available for JavaScript Variable Targeting:\n
      \n
    • exactly matches<\/li>\n\n\n\n
    • does not exactly match<\/li>\n\n\n\n
    • contains<\/li>\n\n\n\n
    • does not contain<\/li>\n\n\n\n
    • starts with<\/li>\n\n\n\n
    • does not start with<\/li>\n\n\n\n
    • ends with<\/li>\n\n\n\n
    • does not end with<\/li>\n\n\n\n
    • is anything (if the key or value is irrelevant, choose this option)<\/li>\n\n\n\n
    • matches the pattern<\/li>\n\n\n\n
    • does not match the pattern<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • When you’re finished, Save<\/strong> the campaign.<\/li>\n<\/ol>\n\n\n\n

      Examples<\/h2>\n\n\n\n

      The following are some examples to help you get started:<\/p>\n\n\n\n

      Simple Variables<\/h5>\n\n\n\n

      If I entered myJavaScriptVariable<\/code> as my key, and testValue<\/code> as my value, the rule will only pass when it is able to find a global JavaScript variable named myJavaScriptVariable<\/code> that has a value of testValue<\/code>.<\/p>\n\n\n\n

      \"JavaScript<\/figure>\n\n\n\n
      Complex Variables<\/h5>\n\n\n\n

      Users can chain together more complex variables, such as an object.<\/p>\n\n\n\n

      For instance, if my key was globalObj.test1.test2.test3.testVar<\/code>, the rule will look for window.globalObj<\/code>, then loop through each section of the JavaScript object to find testVar<\/code>.<\/p>\n\n\n\n

      If the string is improperly formed, has a syntax error, or the variable path is incorrect, the rule will fail.<\/p>\n\n\n\n\n\n