rudder-sdk-js
rudder-sdk-js copied to clipboard
rudderlabs
feat: initialize iubenda consent manager plugin
PR Description
This PR integrates iubenda consent manager with rudderstack. demo:
https://github.com/rudderlabs/rudder-sdk-js/assets/25850856/9ed545eb-f428-48e6-8e19-650f5fc5acf4
Testing instructions
- create a new iubenda.html file in examples/v3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>RudderStack JS SDK v3 Example</title>
<script>
window._iub = window._iub || [];
var _iub = _iub || [];
_iub.csConfiguration = {
lang: 'en',
cookiePolicyId: 36178045,
siteId: 3405502,
logLevel: 'debug',
enableTcf: true,
perPurposeConsent: true,
skipSaveConsent: false,
banner: {
position: 'float-center'
}
};
</script>
<!-- <script async src="http://localhost:3012/cookie_solution/iubenda_cs.js"></script> -->
<script async src="//cdn.iubenda.com/cs/beta/iubenda_cs.js"></script>
<script>
var sdkBaseUrl = 'http://localhost:3001/cdn';
var sdkName = 'rsa.min.js';
var asyncScript = true;
window.rudderAnalyticsBuildType = 'modern';
window.rudderanalytics = [];
var methods = [
'setDefaultInstanceKey',
'load',
'ready',
'page',
'track',
'identify',
'alias',
'group',
'reset',
'getAnonymousId',
'setAnonymousId',
'startSession',
'endSession',
'getSessionId',
];
for (var i = 0; i < methods.length; i++) {
var method = methods[i];
window.rudderanalytics[method] = (function (methodName) {
return function () {
window.rudderanalytics.push([methodName].concat(Array.prototype.slice.call(arguments)));
};
})(method);
}
try {
new Function('return import("")');
window.rudderAnalyticsBuildType = 'modern';
} catch (e) {}
window.rudderAnalyticsMount = function () {
if (typeof globalThis === 'undefined') {
Object.defineProperty(Object.prototype, '__globalThis_magic__', {
get: function get() {
return this;
},
configurable: true
});
__globalThis_magic__.globalThis = __globalThis_magic__;
delete Object.prototype.__globalThis_magic__;
}
var rudderAnalyticsScript = document.createElement('script');
rudderAnalyticsScript.src = ''
.concat(sdkBaseUrl, '/')
.concat(window.rudderAnalyticsBuildType, '/iife/')
.concat(sdkName);
rudderAnalyticsScript.async = asyncScript;
if (document.head) {
document.head.appendChild(rudderAnalyticsScript);
} else {
document.body.appendChild(rudderAnalyticsScript);
}
};
if (typeof Promise === 'undefined' || typeof globalThis === 'undefined') {
var rudderAnalyticsPromisesScript = document.createElement('script');
rudderAnalyticsPromisesScript.src =
'https://polyfill.io/v3/polyfill.min.js?features=Symbol%2CPromise&callback=rudderAnalyticsMount';
rudderAnalyticsPromisesScript.async = asyncScript;
if (document.head) {
document.head.appendChild(rudderAnalyticsPromisesScript);
} else {
document.body.appendChild(rudderAnalyticsPromisesScript);
}
} else {
window.rudderAnalyticsMount();
}
// New addition to load script ends
var loadOptions = {
logLevel: 'DEBUG',
configUrl: 'https://api.rudderlabs.com',
destSDKBaseURL: sdkBaseUrl + '/' + window.rudderAnalyticsBuildType + '/js-integrations',
pluginsSDKBaseURL: 'http://localhost:3002/cdn/' + window.rudderAnalyticsBuildType + '/plugins',
plugins: [
'IubendaConsentManager'
],
consentManagement: {
enabled: true,
provider: 'iubenda',
},
};
rudderanalytics.load('__WRITE_KEY__', '__DATAPLANE_URL__', loadOptions);
rudderanalytics.identify(
'customUserID',
{
name: 'John Doe',
title: 'CEO',
email: '[email protected]',
company: 'Company123',
phone: '123-456-7890',
rating: 'Hot',
city: 'Austin',
postalCode: '12345',
country: 'US',
street: 'Sample Address',
state: 'TX',
},
function (message) {
console.log('in identify call', message);
},
);
rudderanalytics.page(
'Home',
'Cart Viewed',
{
path: '',
referrer: '',
search: '',
title: '',
url: '',
},
function (message) {
console.log('in page call', message);
},
);
rudderanalytics.track(
'test track event 1',
{
revenue: 30,
currency: 'USD',
user_actual_id: 12345,
},
function (message) {
console.log('in track call 1', message);
},
);
rudderanalytics.track(
'test track event 2',
{
revenue: 45,
currency: 'INR',
user_actual_id: 333,
},
function (message) {
console.log('in track call 2', message);
},
);
rudderanalytics.track(
'test track event 3',
{
revenue: 10003,
currency: 'EUR',
user_actual_id: 5678,
},
function (message) {
console.log('in track call 3', message);
},
);
rudderanalytics.ready(function () {
console.log('All ready!!!');
});
// TODO: Call other APIs here
</script>
</head>
<body>
<h1>Page Loaded</h1>
<br />
<button data-testid="page-btn" onclick="page()">Page</button>
<button data-testid="identify-btn" onclick="identify()">identify</button>
<button data-testid="track-btn" onclick="track()">Track</button>
<button data-testid="alias-btn" onclick="alias()">Alias</button>
<button data-testid="group-btn" onclick="group()">Group</button>
<p data-testid="action" id="action"></p>
<p data-testid="payload" id="rudderElement"></p>
<script>
function page() {
rudderanalytics.page(
'Home',
'Cart Viewed',
{
path: '',
referrer: '',
search: '',
title: '',
url: '',
},
function (rudderElement) {
console.log('in page call');
document.getElementById('action').innerHTML = 'Page called';
document.getElementById('rudderElement').innerHTML = JSON.stringify(rudderElement);
},
);
}
function identify() {
rudderanalytics.identify(
'customUserID',
{
name: 'John Doe',
title: 'CEO',
email: '[email protected]',
company: 'Company123',
phone: '123-456-7890',
rating: 'Hot',
city: 'Austin',
postalCode: '12345',
country: 'US',
street: 'Sample Address',
state: 'TX',
},
{},
function (rudderElement) {
console.log('in identify call');
document.getElementById('action').innerHTML = 'Identify called';
document.getElementById('rudderElement').innerHTML = JSON.stringify(rudderElement);
},
);
}
function track() {
rudderanalytics.track(
'test track event 1',
{
revenue: 30,
currency: 'USD',
user_actual_id: 12345,
},
function (rudderElement) {
console.log('in track call');
document.getElementById('action').innerHTML = 'Track called';
document.getElementById('rudderElement').innerHTML = JSON.stringify(rudderElement);
},
);
}
function alias() {
rudderanalytics.alias('alias-user-id', function (rudderElement) {
console.log('alias call');
document.getElementById('action').innerHTML = 'Alias called';
document.getElementById('rudderElement').innerHTML = JSON.stringify(rudderElement);
});
}
function group() {
rudderanalytics.group(
'sample_group_id',
{
name: 'Apple Inc.',
location: 'USA',
},
function (rudderElement) {
console.log('group call');
document.getElementById('action').innerHTML = 'Group called';
document.getElementById('rudderElement').innerHTML = JSON.stringify(rudderElement);
},
);
}
</script>
</body>
</html>
- replace WRITE_KEY, DATAPLANE_URL with proper values
- go to
packages/analytics-js-plugins - run:
npm run build:modern - go to root
npm run start:modern- go to rudderstack dashboard
- navigate to JS Source ( were we got our WRITE_KEY )
- open live events
- run iubenda.html on a localserver e.g
python3 -m http.server 6060 - navigate to the local server in browser
- accept iubenda banner
- refresh page
- after page is refreshed check live event logs and verify consent ids are sent
- clear cookies in browser
- refresh page
- click on
learn more and customize - select few purposes and save consent
- refresh page
- check live events logs for proper
allowedConsentIds&deniedConsentIds
Linear task (optional)
Linear task link
Cross Browser Tests
Please confirm you have tested for the following browsers:
- [ ] Chrome
- [ ] Firefox
- [ ] IE11
Sanity Suite
- [ ] All sanity suite test cases pass locally
Security
- [ ] The code changed/added as part of this pull request won't create any security issues with how the software is being used.
Hello @mohamedkhattab Thanks for your contribution.
However, we're internally revamping this feature and developing it into generic consent management to enable our customers to take full advantage of the CMPs we support and easily integrate any custom solutions. The plugins themselves are already revamped to support it.
We aim to release GCM for all users by the end of the quarter. So, this plugin can be functional only after that. But, I'd still encourage you to complete the implementation and keep things ready for quickly making it live later.
thanks for letting me know @saikumarrs! in the meantime I'll continue the implementation as you suggested for now to be able to migrate to the generic consent management feature once it's available
This PR is considered to be stale. It has been open 20 days with no further activity thus it is going to be closed in 10 days. To avoid such a case please consider removing the stale label manually or add a comment to the PR.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hello @saikumarrs! I've updated the plugin implementation and added a screencast to demo that it's working, I've rebased with the latest develop branch, is there anything else required for this implementation ?
Hello @saikumarrs! I've updated the plugin implementation and added a screencast to demo that it's working, I've rebased with the latest
developbranch, is there anything else required for this implementation ?
Hello @mohamedkhattab Thanks for keeping this PR up to date. The generic consent management functionality is yet to be released as a GA. It is likely to happen in a month. After that, you can rebase again, and I'll review all the changes.
Hi @saikumarrs! we've noticed some new updates on the develop branch, is the generic consent management ready ? or are there more developments we should wait for ?
Hi @saikumarrs! we've noticed some new updates on the develop branch, is the generic consent management ready ? or are there more developments we should wait for ?
Hi @mohamedkhattab, thanks for your patience. The GCM functionality will take at least another month or more to be GA. As it's a big change and a significant offering, we're being extra cautious. We'll let you know here as soon as it's ready for you to resume working.
Also, beyond the changes in the SDK, we have to include this as a supported CMP in our control plane, which will require us to do more work. So, we'll plan this through and let you know accordingly.
This PR is considered to be stale. It has been open 20 days with no further activity thus it is going to be closed in 10 days. To avoid such a case please consider removing the stale label manually or add a comment to the PR.
This PR needs GCM feature to get released. The team is working actively on that and will get back to review this PR after ensuring the backward compatibility.
Hello! This PR has been open for 20 days without any activity. Therefore, it's considered as stale and is scheduled to be closed in 10 days. If you're still working on this, please remove the 'Stale' label or add a comment to keep it open. Thanks for your contribution!
Hello! This PR has been open for 20 days without any activity. Therefore, it's considered as stale and is scheduled to be closed in 10 days. If you're still working on this, please remove the 'Stale' label or add a comment to keep it open. Thanks for your contribution!
Hello! This PR has been open for 20 days without any activity. Therefore, it's considered as stale and is scheduled to be closed in 10 days. If you're still working on this, please remove the 'Stale' label or add a comment to keep it open. Thanks for your contribution!