Custom Module JavaScript Selectors

Javascript Selectors are very useful in our Site Campaigns as they allow us to specify which pages the custom modules of the site campaign will be displayed on by using the URL as a reference. We can either specify the URLs that the module will display on or specify URLs for the module to specifically not display on which is useful if you have a site campaign which you would like to cover the majority of your site.

These selectors can use an entire URL or just a small section of it as a key to include or exclude a specific page. The examples below use http://www.intilery.com/about-us

Selector What it refers to Will include/exclude
window[‘location’][‘href’] http://www.intilery.com/about-us This exact URL
window[‘location’][‘protocol’] http: Any page with this protocol
window[‘location’][‘hostname’] www.intilery.com Every page under this domain
window[‘location’][‘pathname’] /about-us Every page with these parameters

Excluding/Including a single page

URL: http://www.intilery.com/about-us

In this example we want to exclude a custom module from the About Us section of the Intilery website so we will use the selector than uses pathname from above:

window[‘location’][‘pathname’] != “/about-us”

In this example the != operator specifies that if the parameters after the URL match then the page will be exclude from the custom module. To specify that it should only appear on a page which has these parameters replace != with == like so:

window[‘location’][‘pathname’] == “/about-us”

Excluding/Including multiple pages

URLs: http://www.intilery.com/about-us, http://www.intilery.com/article-types/blogs

For multiple pages your selector will not be much different from doing it with a single page, you simply write two selectors and separate them using an OR operator which is ||.

This will exclude:

window[‘location’][‘pathname’] != “/about-us” &&

window[‘location’][‘pathname’] != “/article-types/blogs”

This will include:

window[‘location’][‘pathname’] == “/about-us” ||

window[‘location’][‘pathname’] == “/article-types/blogs”

Excluding/Including with a specific portion of a URL segment

In some cases you will have a URL which contains multiple parameters, http://www.intilery.com/article-types/blogs, and you will want to exclude or include only pages that have one of those specific parameters in the URL. For example, you might want to exclude the custom module from the /blogs page but include it on the other /article-types pages. This is more complicated than the previous examples and requires the use of both the .split() and .indexOf() JS methods.

Inclusion:

window[‘location’][‘pathname’].indexOf(‘/article-types’) > -1

Exclusion:

window[‘location’][‘pathname’].indexOf(‘/article-types’) == -1

These two selectors check if a specific string exists within the URL section that we have specified, in this case it is checking to see if the string ‘/article-types’ exists within the pathname. The -1 on the right hand side of the statement denotes that it does not exist so the == operator will return false, the > operator will return true because the string does exist within the URL pathname.

Step-by-Step Excluding/Including URLs

  1. Navigate to the module that is applied to the campaign.
    (Campaigns > Site Campaigns > Custom Modules > select the desired module through the menu on the left).
  2. Press Edit Code within the module (img a)
  3. Modules that have exclusions set up will have a list of paths of web addresses under the Javascript Selectors heading as shown in (img b). A path is all the web address after the domain suffix (e.g. .com, .co.uk, .gov.uk etc.).
  4. Within the Javascript Selectors, Add a comma after the previous path. (img c)
  5. Add the path of the web address you wish to exclude or include.  Make sure to add this pathname contained within quotation marks as shown. (img c)
    1. Side note: To know if this is including or excluding this depends on the logic at the end of the statement. Simply, Exclude is, ending in == -1. Include is, ending in > -1.
  6. Then press Update > Save > Deploy > Deploy to Test (img d) (only Deploy to Live if you know this is working after testing!)

a)

b)

c)

d)

Still need help? Contact Us Contact Us