Please be aware that Ceros SDK plugins are non-native tools and are provided "as is". As such, we cannot guarantee that plugin functionality will work as intended across all implementation instances.
About This Plugin
The plugin enables the retention of all UTM parameters. This specific use case would only apply to outbound links from a Ceros experience (i.e., an On Click -> Go To URL interaction.)
Click to import demo experience
How To Implement
Step 1: Add and Adjust the Custom HTML
Copy the SDK Script below and paste it into the Custom HTML field within the Settings panel in the Studio. Press OK to finish and close the panel.
<script src="https://labs.ceros.com/sdk-plugins/utm-parameters/main.js?v=2" id="utm-param-plugin" data-params-to-pass='add-your-custom-utm-parameters-here'>
</script>This SDK script has a configurable parameter:
• data-params-to-pass - add the parameters you would like to carry over to another page to this attribute. If this attribute value is empty or the attribute is missing, then the plugin will carry over the default UTM parameters: 'utm_source,utm_medium,utm_campaign,utm_term,utm_content'
Note: When typing in UTM parameters to pass, make sure that there are no spaces between words.Â
Step 2: Set Up SDK Hotspots
1. Create a hotspot over the element you wish to link to an outbound URL.
2. With this hotspot selected, open the SDK Panel.
3A. If you would like this hotspot to open a link in the same tab, type in the tag go-to-url in the second Enter Tag field beneath the SDK ID, then press Enter/Return to add the tag.
3B. If you would like this hotspot to open a link in a new tab, type in the tag go-to-url-newtab in the second Enter Tag field beneath the SDK ID, then press Enter/Return to add the tag.
Note: Please be sure to only include one of these tags and not both.
4. Keeping the SDK Panel open and our hotspot selected, type in your URL in the second Enter Payload field. (example: https://ceros.com)
• Please note that https://ceros.com, in this case, would be the website you wish to redirect to. You would need to remove any previously added On Click -> Go To URL interaction for this specific hotspot, as the SDK tag now provides that function.
Note: The URL must include either an http:// request or an https:// request. ceros.com would NOT work. http://ceros.com or https://ceros.com WILL work.
Analytics note: Since the Hotspots created for this plugin may only trigger SDK commands, Click and/or Hover events are NOT sent to Ceros Analytics, Google Analytics, or Google Tag Manager. To work around this, there would need to be a Click and/or Hover interaction added to the Hotspot. It can be anything, i.e., toggling the visibility of a shape that exists off the canvas.
Optional: Use with Embedded Experiences
1. Follow the same steps above to set up your experience.
2. Copy the script below and paste it into the <body> tag on the page where you're embedding the Ceros experience.
<script>
window.addEventListener("message", function (e) {
if (e.data === "cerosIframeIsReady!") {
var iframes = document.querySelectorAll("iframe");
var url = location.href;
for (var i = 0; i < iframes.length; i++) {
var iframe = iframes[i];
iframe.contentWindow.postMessage({ url: url }, "*");
}
}
});
</script>