Radical

Custom JS

You can add JavaScript to your creatives by using the Custom JS tab in the creative editor. This is a powerful feature that allows you to add custom code to your creatives. You can use this feature to add custom tracking, analytics, or any other custom code to your creatives including third-party APIs.

Creating a custom JS project

Example command for creating a custom JS project called my-custom-js-app

npx create-rad-app my-custom-js-app

create-rad-app

Creating a project using the create-rad-app command is not necessary. However, it will provide you with a pre-configured project that you can use as a starting point.

Using the custom JS project

If you decide to use the create-rad-app command to create a custom JS project, you will see a file structure similar to the one below:

my-custom-js-app
├── ad.js
├── ad.css
├── index.html
├── jsconfig.json
├── package.json
├── server.js
├── types.js
└── README.md

ad.js

The ad.js file is the entry point for your custom JS project. This is where you can add your custom JavaScript code. If you don't want to use the create-rad-app command, you can create a file called index.js in the root of your project and add your custom JavaScript code there.

Here's an example of what the index.js file might look like:

/**
 * @type {Radical}
 */
const rad = Radical.getAdByWindow(window)
const container = rad.getContainer()
const inScreenShot = window.location.href.indexOf('preview?screenshot=1') > -1

const CONFIG = {
  elementIds: {},
}

if (!rad.getMergedContent().inEditor) {
  rad.onLoad(onAdLoaded)
  rad.onRender(onAdRender)
  rad.onBeforeRender(onBeforeRender)
}

function onBeforeRender() {}

function onAdRender() {}

function onAdLoaded() {}

If you want to learn more about the Radical object, you can check out the Radical API reference.

types.js

The types.js file includes the types for the Radical API. This file is optional, but it can be useful if you want to use autocomplete and type checking in your custom JS project.

Using types from the types.js with JSDoc

/**
 * @type {Radical}
 */
const rad = Radical.getAdByWindow(window)
// rad is now typed as Radical

Known issues

  • Updating an event listener without refreshing the page will cause the event listener to be called multiple times (old and new version). This is because the old event listener is not removed when the server updates the custom JavaScript code. To avoid this issue, refresh the page after updating the event listener.
  • Lightbox is currently not supported in the create-rad-app project.

Was this page helpful?