Overview
Rollick and the National Marine Manufacturers Association have established the guidelines for including the badge within a marketplace and made it easy to integrate by embedding JavaScript includes.
Integration Option
Rollick Award Script
Rollick has a lightweight JavaScript include that can be used to manage the decision logic to display the badge and place it on the vehicle detail page.
Decision Logic
The Rollick script will evaluate when to display the badge based on the vehicle details. The vehicle details for brand, year, condition, and type need to be passed into the Rollick script on initialization.
Badge Interactions
When displayed the badge will include a click action and open a modal dialog box that includes the NMMA Award description. This is automatically enabled as a part of the badge placement within the page.
Metrics
The Rollick script has an automatic integration with Aimbase Analytics to track badge impressions and clicks. To enable this option simply include the Aimbase Analytics JavaScript within the page prior to including the Rollick Award script. The Rollick Award script will automatically recognize that the page is Aimbase Analytics capable and start to track impressions and clicks.
Integration
To include the Rollick Award script with metric tracking, place the JavaScript script include for Aimbase Analytics below within the HEAD section of the site. Be sure to replace the data-client Id below with your actual Aimbase Data Client Id provided by Rollick.
<script
type="text/javascript"
src="https://ws.aimbase.com/Scripts/awa.js"
id="AimbaseAnalytics"
data-clientId="{insert your Aimbase client id}">
</script>
Then place the Rollick Award JavaScript include below the Aimbase Analytics JavaScript include within the HEAD section of the site:
NOTE: the URL https://cdn.rollick.io/awards/RollickBrandAwards.js is case sensitive.
<script type="text/javascript"
src="https://cdn.rollick.io/awards/RollickBrandAwards.js"
id="RolAwards"
defer="defer" >
</script>
The Rollick Award script has several attributes that are available to set the vehicle details and for managing the placement of the badge within the website page.
Vehicle Detail Attributes:
· rollick-vehicle-brand: Vehicle Brand Name (e.g., "Rollick")
· rollick-vehicle-year: Vehicle Year (e.g., "2022"), must be a 4-digit numeric year
· rollick-vehicle-condition: Vehicle Condition. "N" is New, and "U" is Used
· rollick-vehicle-type: Vehicle Type (e.g., "Watercraft")
The vehicle details for brand, year, condition, and type are required to be added to the script include and also need to accurately represent what is being displayed on the page.
<script type="text/javascript"
src="https://cdn.rollick.io/awards/RollickBrandAwards.js"
id="RolAwards"
defer="defer"
rollick-vehicle-brand="{insert brand}"
rollick-vehicle-year="{insert year}"
rollick-vehicle-condition="{insert condition}"
rollick-vehicle-type="{insert type}" >
</script>
Badge Placement Attributes:
· alignment: Badge Alignment (e.g., "top-left","top-right", "bottom-left", "bottom-right")
· position: Badge Position inside the screen (e.g.,"absolute", "fixed")
· horizontal-padding: Horizontal Space in px or % (e.g.,"20px")
· vertical-padding: Vertical Space in px or % (e.g.,"20%")
· container: HTML element Id, if specified, the badge will be addedto the container
· custom-style: Additional style (e.g., "transform:translate(0%, -50%);"
The badge placement attributes are necessary for the Rollick Award script to understand where to place the badge. There are two approaches that can be used to manage where to place the badge on the page.
A container can be included within the website template/CMS and used to dictate where the badge should be included on the page when applicable. This option does not require the use of any other placement attributes. Simply set the container HTML element Id as the container attribute value as a part of the Rollick Award script.
<script type="text/javascript"
src="https://cdn.rollick.io/awards/RollickBrandAwards.js"
id="RolAwards"
defer="defer"
rollick-vehicle-brand="{insert brand}"
rollick-vehicle-year="{insert year}"
rollick-vehicle-condition="{insert condition}"
rollick-vehicle-type="{insert type}"
container="{insert container id}" >
</script>
The other placement attributes can be used to explicitly set where and how the badge should be displayed on the page. Only include the attributes that are necessary to set the desired badge placement on the page.
<script type="text/javascript"
src="https://cdn.rollick.io/awards/RollickBrandAwards.js"
id="RolAwards"
defer="defer"
rollick-vehicle-brand="{insert brand}"
rollick-vehicle-year="{insert year}"
rollick-vehicle-condition="{insert condition}"
rollick-vehicle-type="{insert type}"
alignment="{insert alignment}"
position ="{insert position}"
horizontal -padding ="{insert horizontal padding}"
vertical-padding ="{insert vertical padding}"
custom-style ="{insert custom style}" >
</script>
Examples
<!-- Within a container -->
<script type="text/javascript"
src="https://cdn.rollick.io/awards/RollickBrandAwards.js"
id="RolAwards"
defer="defer"
rollick-vehicle-brand="Rollick"
rollick-vehicle-year="2022"
rollick-vehicle-condition="N"
rollick-vehicle-type="Watercraft"
container="rollick-award-badge">
</script>
<!-- Fixed Position on the screen -->
<script type="text/javascript"
src="https://cdn.rollick.io/awards/RollickBrandAwards.js"
id="RolAwards"
defer="defer"
rollick-vehicle-brand="Rollick"
rollick-vehicle-year="2022"
rollick-vehicle-condition="N"
rollick-vehicle-type="Watercraft"
position="fixed"
alignment="bottom-left"
horizontal-padding="20px"
vertical-padding="20px">
</script>