Use Google Tag Manager (GTM) and Claspo’s JavaScript API to send user-specific data (like membership tier, last purchase info, user ID, etc.) from your website to Claspo. This enables dynamic widget display rules (showing widgets only to certain users) and personalized content (e.g. greeting a user by name or pre-filling a form field).
By leveraging data you already track in your marketing stack (for example, variables in Google Tag Manager), you can reuse existing customer insights for targeting Claspo widgets without needing additional coding or back-end changes.
Prerequisites and overview
Google Tag Manager installed: We assume your site already has GTM set up. If not, install GTM first.
Know your user data: Identify what user information you want to use. Common examples include:
subscriptionStatus: e.g. Gold, Silver, Bronze (customer tier or loyalty level).
lastPurchase: e.g. a date or amount of the user's last purchase.
userId or userEmail: a unique ID or email to identify the user.
User name: if you want to greet the visitor by name or personalize messages.
How it works: We will use GTM to capture these data points and then push them to Claspo via JS API. Claspo can then use this data in its Display Rules (to decide if/when a widget should show) and in Merge Tags (to personalize widget content with dynamic values like the user’s name or other details).
Step 1: Set up GTM variables for the user data
Create User-Defined Variables in GTM to capture each piece of data. This lets you reuse the values easily in your tags:
In GTM, go to Variables > New (User-Defined Variable). Create a variable for data point:
Custom JavaScript Variable: If the data is available via a global JS object or needs processing, you can use a Custom JavaScript variable.
Name your GTM variables clearly. For instance: subscriptionStatus, lastPurchase, userId. (The names can be anything, but keeping them intuitive helps.)
Double-check that these GTM variables correctly pull in data. You can use GTM’s Preview mode to test (more on this in the testing section below). When you preview and load your site, look under the Variables tab for a given event to see if these variables show the expected values.
Step 2: Create a GTM tag to send data to Claspo
With variables ready, set up a Custom HTML tag in GTM that will pass the data to Claspo. We’ll do this by calling Claspo’s JS API when the page loads:
1. Add Custom HTML Tag: Place this code snippet: claspo('addVariables', { variableName: value }). Replace a variable name with your actual GTM variable name.
2. Set the Tag Trigger: Choose an appropriate trigger for this tag. Typically, DOM Ready is a good choice. This ensures:
The Claspo base script has loaded (from the All Pages tag you set up) by the time we push the data.
The user data is available (if your data might only be present after the DOM is loaded).
To set this, click Triggering and select DOM Ready. You could also use the default All Pages trigger if the data is available immediately, but DOM Ready is safer if you’re reading from the DOM or if the Claspo script might need a moment to initialize.
3. Save the tag.
Note: Only plain key-value pairs allowed
You can pass only key-value pairs (e.g., param: value). Nested objects or arrays are not supported.
Note: You can pass one or multiple parameters at the same time
We support batch parameter passing, meaning users can send a single parameter or multiple parameters in one API call.
Step 3: Test and troubleshoot with GTM preview
Before going live, it’s crucial to test that everything is working as intended. GTM’s Preview mode and debug tools will be your best friend here:
Enable GTM preview mode: In GTM, click the Preview button and enter your site URL. This will open your website with the GTM panel.
Check fired tags: As you navigate the site in preview mode, watch the Summary list. On page load (or when the DOM Ready event occurs), you should see your event appear in the list (since our Custom HTML tag pushed it).
Inspect tag firing sequence: Click on that event. Then inspect a tag firing sequence and note when your tag fires (e.g. DOM ready).
Verify variable values: Select the appropriate message in the left column. Then look at the Variables section – you should see the values for your GTM variable. If your variable shows as undefined, it may be defined too late in the page load sequence. Ensure your variable is defined before the Claspo custom properties tag fires.
Note: Don’t rely on page storage
Send the needed tags on each page view where the widget might show. We don’t store parameter values permanently. If a parameter is passed on Page A but needs to be used on Page B, you must pass it again on Page B.
Now you can use this data in Claspo to set widget display rules with JavaScript variables or personalize content using Merge tags with Data Layer values.