I am creating a wordpress plugin for GDPR Cookie consent. I am trying to integrate IAB TCF in my plugin. I have already created a banner for displaying on the website. I am getting vendor and purpose list using GVL, i am then taking consent from user and generating the TC STring. Now I wanted tt overify it on a validator. I installed cmp validator 2.2 chrom extension. Now the extension is getting details about cmp, i.e the cmp is getting initialized but even on giving consent, i am not able to see consents in the validator console.
This is the code for banner on front-end-
import { CmpApi } from "@iabtechlabtcf/cmpapi";
import { TCModel, TCString, GVL } from "@iabtechlabtcf/core";
import * as cmpstub from "@iabtechlabtcf/stub";
const cmpId = 1000;
const cmpVersion = 1500;
cmpstub();
GVL.baseUrl = "https://923b74fe37.nxcli.io/rgh/";
const gvl = new GVL();
console.log("GVL", gvl);
window.__tcfapi = function (command, version, callback, parameter = "") {
console.log(
`__tcfapi called with command: ${command}, version: ${version}, parameter: ${parameter}`
);
if (command === undefined) {
console.trace("Undefined command triggered here");
}
if (command === "getTCData" && version === 2) {
getTCData(callback, parameter);
} else {
callback({}, false); // Default response for unsupported commands
}
};
window.__tcfapi.queue = window.__tcfapi.queue || [];
window.__tcfapi.loaded = true;
const tcModel = new TCModel(gvl);
var encodedString = "default tc string...";
function getTCData(callback, parameter) {
console.log("getTCData function called");
const sampleTCData = {
tcString: tcModel.tcString,
tcfPolicyVersion: tcModel.tcfPolicyVersion,
cmpId: cmpId,
cmpVersion: cmpVersion,
gdprApplies: tcModel.gdprApplies,
eventStatus: "tcloaded",
cmpStatus: "loaded",
isServiceSpecific: true,
useNonStandardTexts: false,
publisherCC: "DE",
purposeOneTreatment: false,
purpose: tcModel.purpose,
vendor: tcModel.vendor,
specialFeatureOptins: tcModel.specialFeatureOptins,
publisher: tcModel.publisher,
};
callback(sampleTCData, true);
}
function initializeCMP() {
console.log("CMP initialized.");
checkForConsentStatus();
}
function checkForConsentStatus() {
// Check if consent has already been given
if (hasConsent()) {
console.log("User has already given consent.");
} else {
}
}
function hasConsent() {
// Logic to check if consent has been given
return !!localStorage.getItem("userConsent");
}
initializeCMP();
gvl.readyPromise.then(() => {
gvl.narrowVendorsTo([1, 2, 4, 6, 8, 10, 11, 12, 14]);
console.log(gvl);
if (iabtcf.consentdata.consent === "undefined")
iabtcf.consentdata.consent = [];
if (iabtcf.consentdata.legint === "undefined") iabtcf.consentdata.legint = [];
if (iabtcf.consentdata.purpose_consent === "undefined")
iabtcf.consentdata.purpose_consent = [];
if (iabtcf.consentdata.purpose_legint === "undefined")
iabtcf.consentdata.purpose_legint = [];
if (iabtcf.consentdata.feature_consent === "undefined")
iabtcf.consentdata.feature_consent = [];
console.log("All vendor data");
console.log(iabtcf.consentdata);
tcModel.publisherCountryCode = "US";
tcModel.version = 2;
tcModel.cmpId = cmpId;
tcModel.cmpVersion = cmpVersion;
tcModel.gdprApplies = true;
tcModel.isServiceSpecific = true;
const cmpApi = new CmpApi(cmpId, cmpVersion, true);
});
(function ($) {
"use strict";
/**
* the IAB requires CMPs to host their own vendor-list.json files. This must
* be set before creating any instance of the GVL class.
*/
$(".gdpr_action_button").click(function (e) {
var elm = $(this);
var button_action = elm.attr("data-gdpr_action");
if (button_action == "accept") {
tcModel.gvl.readyPromise.then(() => {
console.log(iabtcf.consentdata.consent);
console.log(iabtcf.consentdata.legint);
console.log(iabtcf.consentdata.purpose_consent);
console.log(iabtcf.consentdata.purpose_legint);
console.log(iabtcf.consentdata.feature_consent);
tcModel.vendorConsents.set(iabtcf.consentdata.consent.map(Number));
tcModel.vendorLegitimateInterests.set(
iabtcf.consentdata.legint.map(Number)
);
tcModel.purposeConsents.set(
iabtcf.consentdata.purpose_consent.map(Number)
);
tcModel.purposeLegitimateInterests.set(
iabtcf.consentdata.purpose_legint.map(Number)
);
tcModel.specialFeatureOptins.set(
iabtcf.consentdata.feature_consent.map(Number)
);
// Set values on tcModel...
encodedString = TCString.encode(tcModel);
iabtcf.consentdata.tcString = encodedString;
console.log("Here");
console.log(iabtcf.consentdata);
tcModel.tcString = encodedString;
console.log(encodedString); // TC string encoded begins with 'C'
window.__tcfapi("getTCData", 2, (tcData, success) => {
if (success) {
console.log("TC Data after accept:", tcData);
} else {
console.error("Failed to retrieve TC Data after accept");
}
});
});
}
});
Now when I refresh my page i get following entries in console-
GVL z {readyPromise: Promise, gvlSpecificationVersion: undefined, vendorListVersion: undefined, tcfPolicyVersion: undefined, lastUpdated: undefined, …}
z {readyPromise: Promise, gvlSpecificationVersion: 3, vendorListVersion: 51, tcfPolicyVersion: 4, lastUpdated: Thu May 02 2024 21:37:38 GMT+0530 (India Standard Time), …}
All vendor data
{consent: Array(3), legint: Array(2), purpose_consent: Array(12), purpose_legint: Array(6), feature_consent: Array(3), …}
__tcfapi called with command: undefined, version: undefined, parameter:
This shows that __tcfapi is getting called on reload, now when i am clicking on accept button, i am getting following further entries in console
(3) ['12345', '6', '8']
(2) ['12345', '8']
(12) ['12345', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
(6) ['12345', '2', '7', '8', '9', '10']
(3) ['12345', '1', '2']
Here
{consent: Array(3), legint: Array(2), purpose_consent: Array(12), purpose_legint: Array(6), feature_consent: Array(3), …}allPurposeIds: (11) ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']allPurposesWithLegint: (5) ['2', '7', '8', '9', '10']allSpecialFeatureIds: (2) ['1', '2']allVendorsRejected: "false"allVendorsSelected: "false"allVendorsWithLegint: (4) ['8', '10', '11', '14']allvendorIds: (9) ['1', '2', '4', '6', '8', '10', '11', '12', '14']consent: (3) ['12345', '6', '8']feature_consent: (3) ['12345', '1', '2']legint: (2) ['12345', '8']purpose_consent: (12) ['12345', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']purpose_legint: (6) ['12345', '2', '7', '8', '9', '10']tcString: "CQDzioAQDzioAPoXcAENAzEsAP_gAEPAACiQAEAUACACAAAA.YAAAAAAAAAAA"
CQDzioAQDzioAPoXcAENAzEsAP_gAEPAACiQAEAUACACAAAA.YAAAAAAAAAAA
As it is clear, the getTCData is not getting called as there is no entry for it in console. GVL is working fine as I am recieving the json. CLick function is working fine as other lines are getting consoled.Just the __tcfapi(“getTCData”) is not getting called as it should be.
What is the issue and error?