Learn how to install the Cello attribution script on your website using Google Tag Manager (GTM). This method is ideal for teams who want to manage tracking scripts without direct code changes.

Prerequisites

Before you begin, ensure you have:
  • A Google Tag Manager account and container set up on your website
  • Admin access to your GTM container
  • Your Cello product ID from the Cello Portal

Step 1: Create a New Tag

  1. Log in to your Google Tag Manager account
  2. Select the container for your website
  3. Click Tags in the left sidebar
  4. Click the New button to create a new tag
  5. Click the Tag Configuration area

Step 2: Add the Cello Attribution Script

  1. Select Custom HTML as the tag type
  2. In the HTML field, paste the following code:
<!-- Cello Attribution Script -->
<script type="module" src="https://assets.cello.so/attribution/latest/cello-attribution.js" async></script>

<script>
// Attribution command queue to prevent race conditions
window.CelloAttribution = window.CelloAttribution || function(t, ...o) {
    if ("getReferral" === t) throw new Error("getReferral is not supported in this context. Use getUcc instead.");
    let e, n;
    const i = new Promise((t, o) => {
        e = t, n = o
    });
    return window.CelloAttributionCmd = window.CelloAttributionCmd || [], window.CelloAttributionCmd.push({
        command: t,
        args: o,
        resolve: e,
        reject: n
    }), i
}
</script>
  1. Name your tag (e.g., “Cello Attribution Script”)

Step 3: Configure the Trigger

  1. Click the Triggering area
  2. Choose when you want the Cello attribution script to load:
  • Select All Pages trigger
  • This ensures referral codes are captured on any landing page

Option B: Specific Pages Only

If you only want to track attribution on specific pages:
  1. Click the + to create a new trigger
  2. Select Page View → Some Page Views
  3. Configure conditions (e.g., Page URL contains “landing” or “signup”)

Step 4: Save and Publish

  1. Click Save to save your tag
  2. Give your tag a descriptive name (e.g., “Cello Attribution - All Pages”)
  3. Click Submit to create a new version
  4. Add a version description (e.g., “Added Cello referral attribution tracking”)
  5. Click Publish to make the changes live

Step 5: Test Your Installation

Method 1: Browser Console Test

  1. Open your website in a new browser tab
  2. Open the browser’s developer console (F12)
  3. Type the following command:
window.CelloAttribution('getUcc')
If the script is installed correctly, you should see a Promise response:
Promise {<pending>}

Method 2: Test with Referral Parameters

  1. Add the ?ucc=test123&productId=test query parameters to your website URL:
    https://yourwebsite.com/?ucc=test123&productId=test
    
  2. Check that the referral cookies are being set in your browser:
    • Open Developer Tools → Application → Cookies
    • Look for cello-referral and cello-product-id cookies
  3. Test ucc retrieval in the console:
    window.CelloAttribution('getUcc').then(ucc => console.log('ucc:', ucc))
    
    Expected output: ucc: test123

Method 3: GTM Preview Mode

  1. In GTM, click Preview to enter debug mode
  2. Visit your website - you should see the GTM debug panel
  3. Verify that your “Cello Attribution Script” tag is firing on the correct pages
Success indicators:
  • Cello attribution tag fires in GTM preview
  • window.CelloAttribution function is available in console
  • ucc cookies are set when visiting with referral parameters
  • getUcc() method returns referral codes correctly