Guidelines
Rollick and the National Marine Manufacturers Association have established the guidelines for Overall Usage and OEM Usage for including the badge within media and a brand website. Please review the NMMA Award Badge usage guidelines before proceeding with any of the integration options described in this document.
https://rollick.io/wp-content/uploads/2023/02/CSI-Award-Badging-Program_Usage-Guidelines.pdf
Integration Options
Image Only
If you wish to manage the placement of the NMMA Brand Award Badge within your brand website(s) the image will be shared in a lossless format by Rollick. This will allow your technology team to have full control on the size and placement of the badge within the site pages. When placing the badge on the site be sure to adhere to the usage guidelines.
Decision Logic
Your team will be responsible for the decision logic on when to appropriately display the badge based on the vehicle brand, vehicle model year, vehicle condition and vehicle type.
Badge Interactions
The NMMA Award Program description will be supplied along with the badge image. Displaying the description within a modal box is not within scope for this option and will have to be developed by your technology team.
Metrics
Your team will be responsible for all impression, click, or conversion tracking related to badging.
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 brand website.
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 available option to track badge impressions and clicks. To enable this option simply include the Aimbase Analytics JavaScript within the page before including the Rollick script. The Rollick script will automatically recognize that the page is Aimbase Analytics capable and start to track impressions and click interactions. The metrics data will be made available for monthly review.
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 after 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 website.
<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>