Custom JavaScript campaigns let you create custom JavaScript code to add or manipulate any element on your page or app. You can change, move, swap, or otherwise manipulate any element with almost no limitations. This lets you fully utilize Dynamic Yield’s optimization and personalization capabilities to leverage any modification you want to try out.
Creating a Custom Code Campaign
- Go to Site Personalization › New Campaign and click Custom Code.
- Specify the campaign settings such as trigger, frequency, and advanced settings. For details, see below.
- Configure the targeting settings of the experience to determine when, where, and for whom the experience is displayed.
Important: If targeting conditions are not set, the campaign will execute on every single page of your website.
- Create variations using templates, based on other experiences, or by using a data feed. When you are done with each variation, click Save Variation.
- Set the allocation, primary metric, and advanced experience settings.
- Configure how much of your traffic to allocate to each variation, and if you want to allocate any traffic to the control group.
- Click Save Experience.
- Click the "+" icon to create an additional targeted experience.
- Click Preview to see how your campaign will appear, and click Save and Publish when you are ready to go.
Custom Code Campaign Settings
Trigger
- Page Load – execute the code immediately upon pageload of the relevant pages (the specific pages are defined in the Targeting step upon adding variations)
- Time on Page – execute the code only after a certain amount of time has passed since pageload
- Exit Intent – execute the code only once the visitor has exhibited exit intent by moving his or her mouse cursor outside the webpage area (desktop only)
- Event – execute the code only once a specific Event has been fired on the page
- Advanced – allows you to set any multiple selection or combination of triggers out of the triggers specified above, as well as:
- Element click – execute the code only once the visitor has clicked with his or her mouse over a specific element on the page, defined with a CSS Selector
- Element mouseover – execute the code only once the visitor has hovered with his or her mouse cursor over a specific element on the page, defined with a CSS Selector
- Element load – execute the code once a specific element has loaded on the page, defined with a CSS Selector
- External component – execute the code only once an external component, such as a jQuery, has loaded
Frequency
- Once per pageview – Your visitors will be exposed to the code each and every time they meet the targeting conditions, with every new pageload
- Once per session – Your visitors will be served the code once they meet the targeting conditions, and will no longer be exposed to it during the remaining pageviews of their session
- Once per day/ week month – Your visitors will be served the code once they meet the targeting conditions, and will not be exposed to it on any pageview during the remainder of the day, week, or month, depending on the timeframe selection
- Once per user – Your visitors will be served the code once they meet the targeting conditions, and will not be exposed to it ever again
Note: The frequency settings are applied on an Experience level, so if you select ‘Once per user’ for a campaign that has two targeted Experiences – one targeted at new visitors and the other at returning – the user will receive the corresponding experience once as a new user, and then upon returning to the site and meeting the ‘returning visitor’ the user will receive the returning-visitor corresponding experience.
Advanced Settings
- Fire Google Analytics Event: Only visible if the Google Analytics integration is enabled. This option is enabled by default, but you can disable it to prevent reporting data to Google Analytics about a specific campaign.
- Allow running this Overlay/Notification in Landing Pages – Allows the campaign to execute on Dynamic Yield Landing Pages.
- Serve on Every SPA Event: relevant for single page applications that don’t generate a browser refresh with every change of screen. If you require the campaign to relaunch or reevaluate its targeting conditions upon each screen change in your single-page application, fire a track_pageview event and enable this option. For more information on working with single page applications, please refer to this article.
- Execute custom integration – Fire a custom JavaScript code when a variation is served. Custom integrations are managed in the integration screen under site settings. This option is only visible if a custom integration is enabled.
Debugging Custom Code Campaigns
Open your browser’s Developer Tools and appending the campaign’s ID (or multiple IDs for multiple campaigns, separated by commas) to the following URL: https://www.dynamicyield.com/?dy_debugger=11111
Extracting a campaign ID from the URL
The object ID can be extracted from the URL of every Custom Code, Messaging and Dynamic Content campaign.
Extracting campaign ID from campaign list page
You can add the campaign ID to you campaign list page by clicking on the columns dropdown selecting ID.
Use-Case: Split Tests
Split tests or redirect tests are used for comparing different URLs as a variation. For example, when testing a new layout of the homepage – you can redirect half of your users to an alternate design. You can use Custom Code campaigns to perform split tests. For details, see Performing Split Tests