The onsite campaign configuration feature is visible only to customers who have opted to manage and configure onsite campaigns. To set this up, you will need to add a one-time ‘div’ script, that your customer success representative will share with you during the setup.
Here’s how you setup a recommendation campaign:
Login to ZetaHub and access the On-site feature in the Campaigns section on the left hand panel.
Click on New Campaign and give it a relevant name.
Now, on the right hand side you can see the visual onsite campaign editor. It consists of 3 tabs:
1. HTML – Place the html code in this space. This is liquid tag enabled and similar to Email campaign editors.
2. CSS – Place the CSS code including media queries required for responsive design.
3. Settings – Here there are options to set the placement, count and any other meta filters that are required.
Container – Selector of the container where you plan to place the widget. ID or Class. Set the selector with the right annotation. For example, ID – “#bt-widget-container” and class – “.bt-widget-container”. Choose to Append, Prepend or Replace. A-Train script on your site will look for the selectors stored here and find on the page when it loads. If there is an active selector found on the page, widget code will be fetched and ingested into the container provided.
Count – Number of articles to display in the widget.
Metafilters – Set filters in here such as recency window (pubDate), section, etc.
Preview and save the widget. Widget will still not be visible on site until you toggle the button “Show on Website” in the Widgets List screen.
How to test your recommendation campaign
Once you have saved the widget, visit the URL where you are placing the widget. Add a query parameter “?bt_onsite_test=true” to the URL. This will allow you to preview the widget on a live site and will be visible only to you and only when the query parameter is found in the URL. Please refer to the below example.
https://www.trekaroo.com/guides/best-things-to-do-in-palm-springs-with-kids?bt_onsite_test=true
Once you are happy with the design, you can just toggle the button and ensure the container with selector configured in the settings is present in the page where you would like to place the widget.
Container:
Create an empty div container in the desired pages with ID (preferred) or class selector or choose an existing container and the right placement in the settings. If you use a class and if it’s present in many pages, the widget will be inserted into all the pages where the selector is found.
ID:
<div id=“bt-destination-footer-widget”>
</div>
Class:
<div class=“bt-destination-footer-widget”>
</div>
UTM Parameters:
If you would like to track using GA and want to include UTM parameters, you can do so by just adding them to {{rec.click-url}} as shown below. Remember to skip the ? like its usually added for the query parameters. In this case, there are already other query parameters set for tracking and identification purpose.
<a href='{{rec.click-url}}utm_source=<ZetaHub or any other relevant name>&utm_medium=<medium>&utm_campaign=<campaignName>’>
__________________________________________________________________________________________
If you have any questions regarding the setup, you can always contact your Customer Success Manager or send an email to [email protected]