OneTrust CCPA Opt Out Builder button not compiling in React

Viewed 926

I went to https://www.onetrust.com/ccpa-opt-out/builder/ to create an 'opt-out cookie use' button. It provided a javascript file and an 'a' tag to represent the 'opt-out' button.

I took the provided code and put it into a script file named CookieButtonScript.js (shown below). Then I placed the tag in my react component (I modified the style attribute for it to work in react):

<a href="javascript:void(0)" data-ot-ccpa-opt-out="link" style={{display: "none"}}>Do Not Sell My Personal Information

Left like this, the a tag does not appear (most likely due to the display none styling, but that's what they're providing). When I remove the 'display: none' styling, the link appears, but does nothing. After clicking it, it should show a modal or pop up like this: Cookie Compliance Banner

<script>
      var otCcpaScript = document.createElement('script'),script1 = document.getElementsByTagName('script')[0];
      otCcpaScript.src = 'https://cookie-cdn.cookiepro.com/ccpa-optout-solution/v1/ccpa-optout.js';
      otCcpaScript.async = false;
      otCcpaScript.type = 'text/javascript';
      script1.parentNode.insertBefore(otCcpaScript, script1); 
      window.otccpaooSettings = {
        layout: {
          dialogueLocation:"right",
          primaryColor: "#000000",
          secondaryColor: "#FFFFFF",
          button:{
            primary:"#000000", 
            secondary:"#FFFFFF", 
          } 
        },
        dialogue: {
          email: {
            display:false,title:"",url:"",
          },
          lspa: {
            accepted:false,
          },
          phone: {
            display:false,title:"",url:"",
          },
          dsar: {
            display:false,title:"",url:"",
          },
          intro: { 
            title:"Do not sell my personal information.",
            description:"Exercise your consumer right to opt out.",
          }, 
          privacyPolicy: {
            title:"",
            url:"", 
          }, 
          optOut: {
            title:"Personalized Advertisements",
            description:"Turning this off will opt you out of personalized advertisements on this website.",
            frameworks:["iab","gam"],
          }, 
          location:"all",
          confirmation: {
            text: "Confirm",
          }, 
        } 
      };
    </script>

EDIT: OneTrust provided an alternative that works correctly. I am unsure if that tag will work without a OneTrust account, however.

There is a JavaScript call to force the preference center to reappear after the initial consent choice. It is called “OneTrust.ToggleInfoDisplay()”. In addition to that function, there is a button that can be added to the body of any page that will create a “Cookie Settings/Do Not Sell My Personal Information” button depending on the geolocation. This button will also bring up the preference center when clicked and can be embedded in the footer of the site or any other section that makes sense for your needs.

You can find this button by heading to the Scripts section in the integration tab > Selecting the domain in question > Select the Test Scripts tab > Copy paste the HTML button tag found under “Do Not Sell & Cookie Setting Button” > Embed in the body section of your HTML file

The button should look something like this:

<!-- OneTrust Cookies Settings button start -->
<button id="ot-sdk-btn" class="ot-sdk-show-settings">
   Cookie Settings
</button>
<!-- OneTrust Cookies Settings button end -->

From there, the button will populate and can be adjusted using CSS to fit properly on the site.

0 Answers
Related