Quickstart

No Comply is a standard web component designed for use in any HTML environment, with any framework or none at all. It helps creative teams move fast—delivering your message to the right people, when they care, and where it can make a difference. Messages remain relevant and personalized at every stage of the customer journey.

Add to an Existing Project

Every campaign is a native web component, meaning it works seamlessly in any JavaScript framework, server-side templating system, or CMS. This makes it easy to integrate into existing projects without requiring specialized tools or complex setup.

Groups

A group holds all the configurations for your campaigns. Each No Comply account must have at least one group, and you should set up one group per marketing initiative, using a clear and identifiable name.

Group Identifier

A group identifier is an alphanumeric string embedded within the No Comply script URL, uniquely identifying a group (e.g., "GROUP_ID"). The group identifier can be found within your No Comply account settings.

Group Snippet

A group snippet is a small piece of JavaScript code that must be added to any web page(s) where No Comply is being implemented.

Install Group Snippet

To get started, simply include No Comply in your project by adding the group snippet:

<!-- Optional: Preload for better performance -->
<link
  rel="modulepreload"
  href="https://content-dev.nocomp.ly/GROUP_ID/routes.js" />

<!-- Required: Load No Comply script for campaign execution -->
<script
  type="module"
  src="https://content.nocomp.ly/GROUP_ID/routes.js">
</script>

Replace GROUP_ID with your group identifier, found within your No Comply account settings.

For optimal performance, place the group snippet at the top of the <HEAD> tag on every web page where you want campaigns to run.

Components

How you use No Comply depends on your project’s structure and the technologies it employs. You can integrate No Comply components in plain HTML, with DOM APIs, or within template languages.

Plain HTML Example

<campaign-group></campaign-group>

This allows No Comply to function as a self-contained, reusable component, ensuring broad compatibility across different environments.

Install with Google Tag Manager

You can add No Comply to your website using Google Tag Manager, allowing for seamless deployment without modifying your site's core code.

Custom HTML Tag

The Custom HTML Tag type allows you to deploy No Comply when a built-in Google Tag Manager integration isn't available.

Follow these steps in Google Tag Manager to add No Comply:

Click Tags and then New.
Click Tag Configuration and select Custom HTML.
Copy and paste the following tag code into the HTML field:

<script>
  (function() {
    /** Required: script with group identifier in path */
    var tag = document.createElement('script');
    tag.type = 'module';
    tag.src = 'https://content.nocomp.ly/GROUP_ID/routes.js';
    document.head.appendChild(tag);

    /** Optional: add data attribute to existing target parent element */
    var target = document.getElementById("parent");
    target.setAttribute('data-campaign-group', 'GROUP_ID');

    /** Required: add custom element */
    var component = document.createElement('campaign-group');
    target.appendChild(component);
  })();
</script>

Replace GROUP_ID with your group identifier from No Comply.
Ensure JavaScript is placed inside <script></script> tags.
Select Support document.write.

Container Element

In some cases, you may need to wrap No Comply in a container element to control layout and styling. Containers, also called parent elements, ensure consistent spacing and structure across a webpage while helping to mitigate layout shifts for a smoother user experience.

Benefits:

Reserves space for dynamically injected content.
Stabilizes late-loading elements to prevent unexpected shifts.

Attribute: `data-campaign-group`

To connect the container to No Comply, use the data-campaign-group attribute. This helps manage campaign configurations by passing information between HTML and scripts.

Example Implementation:

<div id="parent" data-campaign-group="GROUP_ID">
  <campaign-group></campaign-group>
</div>

Conditional Removal

If no campaign group is triggered, the element with the data-campaign-group attribute will be removed from the layout to prevent rendering unnecessary elements.

This ensures that only active campaign groups remain in the page structure, preventing unwanted placeholders when no campaign is running.