Jump to content
joshua

PrivacyWire - Cookie Management & async external asset loading

Recommended Posts

 

20 hours ago, The G said:

Why would you want to include both PrivacyWire.js and PrivacyWireUnstyled.js?

@The G After your post I understood that only one of the mentioned JS files is required. In any case I would like to manage for less HTTP requests as possible. In particular, I would like to merge PrivacyWire JS code into the ProCache JS minified file, and make the same for the CSS.

 

The following procedure makes PrivacyWire to work but still performing one more HTTP request for retrieving the JS file (PrivacyWire.js/PrivacyWireUnstyled.js) in combination with ProCache. 

  1. In PrivacyWire config option, check "Render Banner and Header Content Manually" and uncheck "Add basic CSS Styling".
  2. In directory /site/css/, create the file PrivacyWire.css which includes the PrivacyWire CSS statements.
  3. In source code, add:
<head>
  ...
  
  <link rel="stylesheet" type="text/css" href="<?= $procache->css([
    ...,
    '../assets/css/PrivacyWire.css'
  ]); ?>"></script>
  
  <?php 
    echo $modules->get('PrivacyWire')->renderHeadContent(); 
  ?>
  
</head>
<body>
  ...
  
  <?php
    echo $modules->get('PrivacyWire')->renderBodyContent();
  ?>
</body>

IMHO The above-mentioned PrivacyWire.css file, even if small sized, should be added in the PrivacyWire module directory by design.

 

The issue is that PrivacyWire loads PrivacyWire.js/PrivacyWireUnstyled.js in all cases. Nothing stops it to perform the one more HTTP request to get the JS file.

PW-PrivacyWire-HTTP_Request.thumb.jpg.560bc267333f450baaea5206d4abfadb.jpg

I would like to avoid this behaviour in order to merge the PrivacyWire JS and CSS code into ProCache JS and CSS chaining. With the above code I can do it for the CSS file but not for the JS file.

Share this post


Link to post
Share on other sites

Hmm, I think you didn't read the instructions carefully enough. Did you notice a "Use ProCache JS Minification (if available)" checkbox near the end of the settings? Not tried it myself, but AFAIK you don't need to mess with other settings if what you want is just ProCache minification.

Try this: uncheck "Render Banner and Header Content Manually", take out the code you manually inserted into the templates and check "Use ProCache JS Minification (if available)".

Regarding CSS: styles are inserted by JavaScript (PrivacyWire.js), so no module CSS file is needed. If you choose the unstyled version, the module will load PrivacyWireUnstyled.js instead leaving the styling up to you (I chose to use the unstyled version and insert the needed styles into my main CSS file, since it will be loaded on every page. Either way seem good solutions to me - the styles are only needed together with the JavaScript.

Off-topic: I'd love an inline code plugin for the forum's editor.

Share this post


Link to post
Share on other sites
24 minutes ago, The G said:

Hmm, I think you didn't read the instructions carefully enough. Did you notice a "Use ProCache JS Minification (if available)" checkbox near the end of the settings? Not tried it myself, but AFAIK you don't need to mess with other settings if what you want is just ProCache minification.

@The G I noticed of that config option, but the "one more HTTP request" is still performed either way by checking and unchecking the "Use ProCache JS Minification (if available)". I would like to merge the PrivacyWire JS code (PrivacyWire.js/PrivacyWireUnstyled.js) into my ProCache JS minified file.

That is, I would like to make something like this:

<head>
  ...
  
  <script src="<?= $procache->js([
    ...,
    '../modules/PrivacyWire/js/PrivacyWireUnstyled.js'
  ]); ?>"></script>
  
  ...
</head>

And stop PrivacyWire to perform its "one more HTTP request" to get the PrivacyWire.js/PrivacyWireUnstyled.js file (ProChaced or not) since I load it myself.

The point here is avoiding the "one more HTTP request". It's a matter of performance.

 

IMHO A config option for this should be added or improved. 

Share this post


Link to post
Share on other sites

I don't think that the file you see requested comes from the module. Pro Cache should automatically merge and minify PrivacyWireUnstyled.js.

Did you took out the code you added in the templates and cleared the cache afterwards? Try uninstalling the module and see if you still have PrivacyWireUnstyled.js requested. Don't forget to clear the cache after any change.

Share this post


Link to post
Share on other sites

Great module! Thanks!

I just started to implement it on a site. There we load some stuff with Ajax after the initial page load.

Is there a way (a public js function) to trigger the functionality (loading iframes) for elements which are added dynamically?

Thanks!

Share this post


Link to post
Share on other sites
1 hour ago, The G said:

I don't think that the file you see requested comes from the module. Pro Cache should automatically merge and minify PrivacyWireUnstyled.js.

I think the PrivacyWire.js/PrivacyWireUnstyled.js file is requested by the PrivacyWire module (see functions ___render()renderHeadContent() > ___getJsFile()). ProCache automatically merges and minifies all js/css files into one file only if in PW Admin > Setup > ProCache the "merge options" are checked BTW since my js/css files change from page to page, I uncheck all these "merge options" (as also advised in ProCache itself).

In other words, I would like to have more control on what is loaded by PrivacyWire.

 

1 hour ago, The G said:

Did you took out the code you added in the templates and cleared the cache afterwards? Try uninstalling the module and see if you still have PrivacyWireUnstyled.js requested. Don't forget to clear the cache after any change.

Of course, if I uninstall the PrivacyWire module I don't get the HTTP request that retrieves the PrivacyWire.js/PrivacyWireUnstyled.js file.

Share this post


Link to post
Share on other sites
4 hours ago, LAPS said:

[...]

That is, I would like to make something like this:


<head>
  ...
  
  <script src="<?= $procache->js([
    ...,
    '../modules/PrivacyWire/js/PrivacyWireUnstyled.js'
  ]); ?>"></script>
  
  ...
</head>

[...]

 The module's output uses the same function (renderHeadContent) :

<script defer src='{$this->wire('modules')->get('ProCache')->js($this->getJsFile())}'></script>

One way to insert just the JavaScript URL in your array would be to check "Render Banner and Header Content Manually" and to use $modules->get('PrivacyWire')->getInlineJs() and $modules->get('PrivacyWire')->getJsFile() instead of $modules->get('PrivacyWire')->renderHeadContent().

 

Edited by The G
Syntax highlighting
  • Like 3

Share this post


Link to post
Share on other sites

The following procedure makes PrivacyWire to work in combination with ProCache, performing the minimum amount of HTTP requests. 

  1. In PrivacyWire config option, check "Render Banner and Header Content Manually" and uncheck "Add basic CSS Styling".
  2. In directory /site/css/, create the file PrivacyWire.css which includes the PrivacyWire CSS statements.
  3. In source code, add:
<head>
  ...
  
  <!-- CSS -->
  
  <link rel="stylesheet" type="text/css" href="<?= $procache->css([
    ...,
    '../assets/css/PrivacyWire.css'
  ]); ?>"></script>
  
  
  <!-- JS -->
  
  <!-- Note: Here order is important. Render these two lines before adding PrivacyWireUnstyled.js -->
  <script>var PrivacyWireSettings=<?= $modules->get('PrivacyWire')->getInlineJs() ?></script>
  <?= $modules->get('PrivacyWire')->renderBodyContent(); ?>
  
  <script src="<?= $procache->js([
    ...,
    '../modules/PrivacyWire/js/PrivacyWireUnstyled.js'
  ]); ?>"></script>
  
</head>
<body>
  ...
</body>

Not an elegant way to make things but it works.

Any improvement is welcome.

Share this post


Link to post
Share on other sites

Hi everyone,

did I understood it correctly, that you want to to include the JS provided by PrivacyWire in one combined file with your other JS files via ProCache?
And the same with the CSS styles?
This actually requires some steps, as PrivacyWire needs the inline script (to pass the backend settings to the frontend), the body content (to have the DOM elements of the banner) and the JS file (to provide the functionality).

With the newest PrivacyWire version (0.4.4) you can do it that way:

Check the "Render Banner and Header Content Manually" in the PrivacyWire config options:
grafik.png.153d046c2033e3927801d2f356918c8d.png

Add the required elements as followed:

<html>
  <head>
    <!-- your head content -->
    <?php
    // load the css files
    echo $procache->link([
        $config->urls->template . "path/to/your/stylesheet.css",
        $modules->get("PrivacyWire")->getPathToCssFile()
    ]);
    
    // load the inline script -> needs to be before the other scripts
    echo $modules->get("PrivacyWire")->getInlineJavaScriptTag();
    ?>
  </head>
  <body>
    <!-- your body content -->
    <?php
    // render the required DOM elements
    echo $modules->get("PrivacyWire")->renderBodyContent();
    
    // render the JavaScript files
    echo $procache->script([
    $config->urls->template . "path/to/your/scripts.js",
    $modules->get("PrivacyWire")->getJsFile()
]);
    ?>
  </body>
</html>

 

  • Like 1

Share this post


Link to post
Share on other sites
22 hours ago, Torsten Baldes said:

Is there a way (a public js function) to trigger the functionality (loading iframes) for elements which are added dynamically?

Hi @Torsten Baldes,

right now there is no such functionality available. I'm will try some ways to implement this soon.

Share this post


Link to post
Share on other sites
1 hour ago, joshua said:

did I understood it correctly, that you want to to include the JS provided by PrivacyWire in one combined file with your other JS files via ProCache?

Yes

1 hour ago, joshua said:

And the same with the CSS styles?

Yes

 

Waiting for the availability of the newest PrivacyWire version (0.4.4) to give it a try.

Share this post


Link to post
Share on other sites
18 minutes ago, LAPS said:

Waiting for the availability of the newest PrivacyWire version (0.4.4) to give it a try.

Already avaiable at github 😉
 

  • Like 1

Share this post


Link to post
Share on other sites

Hey everyone,

I did a lot of refactoring of PrivacyWire this weekend - both for the backend and frontend.
The Javascript core of PrivacyWire is nearly completely rewritten in ES6. This results in much better readability and of course extensibility. For examle, as asked by @Torsten Baldes, one can now manually trigger to refresh the element detection of PrivacyWire by simple running the following function afterwards:

window.PrivacyWire.refresh();

You'll find a brief overview of the updates here: https://github.com/blaueQuelle/privacywire/blob/es6/CHANGELOG.md#101b-beta

Right now this update is in an separate branch at github: https://github.com/blaueQuelle/privacywire/tree/es6
I would be happy if some of you could test this version in your dev environment.
If you haven't used any hooks or modifications, it should just run without any changes.

I'm looking forward to your feedback! 🙂

Best,
Joshua

 

Edited by joshua
Updated version number
  • Like 4
  • Thanks 2

Share this post


Link to post
Share on other sites

@LAPS With this new version, there are even more customizations available. Have a look into the comments in PrivacyWire.module.

This example code does the same as the one from my post from last Friday, but with the new syntax of the new version:

<html>
  <head>
    <!-- your head content -->
    <?php
    $privacywire = $modules->get("PrivacyWire");
    // load the css files
    echo $procache->link([
        $config->urls->template . "path/to/your/stylesheet.css",
        $privacywire->getPrivacyWireStyles()->url
    ]);
    
    // load the inline script
    echo $privacywire->renderPrivacyWireConfigAsInlineJs();
    ?>
  </head>
  <body>
    <!-- your body content -->
    <!-- your body content -->
    <!-- your body content -->
    <?php
    // render the required DOM elements
    echo $privacywire->bodyContent;
    
    // render the JavaScript files
    echo $procache->script([
    $config->urls->template . "path/to/your/scripts.js",
    $privacywire->getPrivacyWireCore()->url
]);
    ?>
  </body>
</html>

 

  • Like 2

Share this post


Link to post
Share on other sites

@joshua is there something like a „clear cookie“ function?

Let's say user clicks on „allow all“ and some google-cookies (statistics) are set. Now users changes his mind and will go to the cookie-options and unset the statistics-cookie checkbox and saves his options. Right now the statistics-cookies remain.

Share this post


Link to post
Share on other sites

Right now there is no "clear cookie" function. You could add an custom js function, which gets triggered after saving the consent and insert the function name in the module config option.

grafik.png.3b13bd981f7e2d76d228cf879f4b33a8.png

One easy way to not use google analytics afterwards, would be a simple reload:

var reloadAfterConsent = function() {
  window.location.reload();
};

After the reload, the google script will not be loaded again, but the cookies will remain.

To also delete existing cookies, some extra work is needed as PrivacyWire don't know, what cookies got set by which script and you probably don't want to delete all cookies.
You could write a function to check for current consent state and delete cookies, if no consent to a specific category is given.
Here is a very rough (and not tested in real life) idea, how you could do something like this:

function eraseCookie(name) {   
    document.cookie = name+'=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';  
}

var removeGoogleCookies = function() {
  if(window.PrivacyWire.userConsent.cookieGroups.statistics !== true) {
    eraseCookie("_ga");
    eraseCookie("_gid");
	// or whatever your cookie names are
  }
};

And then add removeGoogleCookies to the "Trigger a custom js function" config option. This script is written with the new logic from the ES6 branch, should also work in earlier versions with different naming though.

 

  • Like 1

Share this post


Link to post
Share on other sites

great! thanks again @joshua

But i wasn't able to find any info in the window object path you suggested.
I found it here: window.localStorage.privacywire
 

But this

console.log(window.localStorage.privacywire)

outputs a string, so i'm not able to check with

if(window.localStorage.privacywire.statistics !== true) {
	// remove cookies
}

Am i missing something?

Share this post


Link to post
Share on other sites

As far as I know, you only can store strings in localStorage. So, without having a look into the code, I know it is common usage to stringify objects before writing them into localStorage, and to JSON.parse() them after retrieving from it. Just try something like this:

var obj = JSON.parse(window.localStorage.getItem('privacyWire'));

 

  • Like 1

Share this post


Link to post
Share on other sites

thanks @horst

for js-beginners like me here is my solution:

function eraseCookie(name) {
  document.cookie = name+'=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; Domain=.your-domain.tld;';  
}

var privacyWireCookies = JSON.parse(window.localStorage.getItem('privacywire'));

if (privacyWireCookies !== null) {
  if(privacyWireCookies.statistics == false) {
  	eraseCookie("cookiename");
  }
}

Be aware that you have set the domain to be able to remove the cookies for google-analytics!

Edited by ngrmm
  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By joshua
      As we often use Matomo (former known as Piwik) instead of Google Analytics we wanted to embed Matomo not only in the template code but also via the ProcessWire backend.
      That's why I developed a tiny module for the implementation.
      The module provides the possibility to connect to an existing Matomo installation with the classical site tracking and also via the Matomo Tag Manager.
      If you have also PrivacyWire installed, you can tell MatomoWire to only load the script, if the user has accepted cookies via PrivacyWire.
      To offer an Opt-Out solution you can choose between the simple Opt-Out iFrame, delivered by your Matomo installation, or a button to choose cookies via PrivacyWire.
      You'll find the module both in the module directory and via github:
      ProcessWire Module Directory MatomoWire @ GitHub MatomoWire @ Packagist ->installable via composer require blauequelle/matomowire I'm looking forward to hear your feedback!


    • By Robin S
      If your module has a lot of config fields you might want to divide them into groups inside a tabbed interface. Here is a demonstration module showing how this can be done.
      https://github.com/Toutouwai/ModuleConfigTabs

      Thanks to @kixe for providing my starting point in this forum topic.
    • By FireWire
      Hello community!

      I want to share a new module I've been working on that I think could be a big boost for multi-language ProcessWire sites.

      Some background, I was looking for a way for our company website to be efficiently translated as working with human translators was pretty laborious and a lack of updating content created a divergence between languages. I, and several other devs here, have talked about translation integrations and have recognized the power that DeepL has. DeepL is an AI deep learning powered service that delivers translation quality beyond any automated service available. After access to the API was opened up to the US, I built Fluency, a DeepL translation integration for ProcessWire.
      Fluency brings automated translation to every multi-language field in the admin, and also provides a translation tool allowing the user to translate their text to any language without it being inside a template's field. With Fluency you can:
      Translate any plain textarea or text input Translate any CKEditor content (yes, with markup) Translate page names for fully localized URLs on every page Translate your in-template translation function wrapped strings Translate modules DeepL offers translations to the following languages: English (US), English (UK), German, French, Spanish, Portuguese (EU), Portuguese (Brazil, Italian, Dutch, Polish, Russian, Japanese, Chinese (Simplified)
      Installation and usage is completely plug and play. Whether you're building a new multi-language site, need to update a site to multi-language, or simply want to stop manually translating a site and make any language a one-click deal, it could not be easier to do it. Fluency works by having you match the languages configured in ProcessWIre to DeepL's. You can have your site translating to any or all of the languages DeepL translates to in minutes (quite literally).
      Let's break out the screenshots...
      When the default language tab is shown, a message is displayed to let users know that translation is available. Clicking on each tab shows a link that says "Translate from English". Clicking it shows an animated overlay with the word "Translating..." cycling through each language and a light gradient shift. Have a CKEditor field? All good. Fluency will translated it and use DeepL's ability to translate text within HTML tags. CKEditor fields can be translated as easily and accurately as text/textarea fields.

      Repeaters and AJAX created fields also have translation enabled thanks to a JavaScript MutationObserver that searches for multi-language fields and adds translation as they're inserted into the DOM. If there's a multi-language field on the page, it will have translation added.

      Same goes for image description fields. Multi-language SEO friendly images are good to go.

      Creating a new page from one of your templates? Translate your title, and also translate your page name for native language URLs. (Not available for Russian, Chinese, or Japanese languages due to URL limitations). These can be changed in the "Settings" tab for any page as well so whether you're translating new pages or existing pages, you control the URLs everywhere.

      Language configuration pages are no different. Translate the names of your languages and search for both Site Translation Files (including all of your modules)

      Translate all of the static text in your templates as well. Notice that the placeholders are retained. DeepL is pretty good at recognizing and keeping non-translatable strings like that. If it is changed, it's easy to fix manually.

      Fluency adds a "Translate" item to the CMS header. When clicked this opens up a modal with a full translation tool that lets the user translate any language to any language. No need to leave the admin if you need to translate content from a secondary language back to the default ProcessWire language. There is also a button to get the current API usage statistics. DeepL account owners can set billing limitations via character count to control costs. This may help larger sites or sites being retrofitted keep an eye on their usage. Fluency can be used by users having roles given the fluency-translate permission.

      It couldn't be easier to add Fluency to your new or existing website. Simply add your API key and you're shown what languages are currently available for translation from/to as provided by DeepL. This list and all configuration options are taken live from the API so when DeepL releases new languages you can add them to your site without any work. No module updates, just an easy configuration. Just match the language you configured in ProcessWire to the DeepL language you want it to be associated with and you're done. Fluency also allows you to create a list of words/phrases that will not be translated which can prevent items such as brands and company names from being translated when they shouldn't

       
      Limitations:
      No "translate page" - Translating multiple fields can be done by clicking multiple translation links on multiple fields at once but engineering a "one click page translate" is not feasible from a user experience standpoint. The time it takes to translate one field can be a second or two, but cumulatively that may take much longer (CKEditor fields are slower than plain text fields). There may be a workaround in the future but it isn't currently on the roadmap. No "translate site" - Same thing goes for translating an entire website at once. It would be great, but it would be a very intense process and take a very (very) long time. There may be a workaround in the future but it isn't on the roadmap. No current support for Inline CKEditor fields - Handling for CKEditor on-demand hasn't been implemented yet, this is planned for a future release though and can be done. I just forgot about it because I've never really used that feature personally.. Alpha release - This module is in alpha. Releases should be stable and usable, but there may be edge case issues. Test the module thoroughly and please report any bugs via a Gitlab issue on the repository or respond here. Please note that the browser plugin for Grammarly conflicts with Fluency (as it does with many web applications). To address this issue it is recommended that you disable Grammarly when using Fluency, or open the admin to edit pages in a private window where Grammarly may not be loaded. This is an issue that may not have a resolution as creating a workaround may not be possible. If you have insight as to how this may be solved please visit the Gitlab page and file a bugfix ticket.
      Requirements:
      ProcessWire  3.0+ UIKit Admin Theme That's Fluency in a nutshell. A core effort in this module is to create it so that there is nothing DeepL related hard-coded in that would require updating it when DeepL offers new languages. I would like this to be a future-friendly module that doesn't require developer work to keep it up-to-date.
      It's Free
      This is my first real module and I want to give it back to the community as thanks. This is the best CMS I've worked with (thank you Ryan & contributors) and a great community (thank you dear reader). The only cost to use this is a subscription fee for the DeepL Pro API. Find out more and sign up here.
      Download & Feedback
      Download the latest version here
      https://github.com/SkyLundy/Fluency-Translation/archive/main.zip
      Github repository:
      https://github.com/SkyLundy/Fluency-Translation
      File issues and feature requests here (your feedback and testing is greatly appreciated):
      https://github.com/SkyLundy/Fluency-Translation/issues
       
      Thank you! ¡Gracias! Ich danke Ihnen! Merci! Obrigado! Grazie! Dank u wel! Dziękuję! Спасибо! ありがとうございます! 谢谢你!

    • By Robin S
      An inputfield module that brings EasyMDE Markdown editor to ProcessWire.
      EasyMDE is a fork of SimpleMDE, for which there is an existing PW module. Inputfield EasyMDE has a few advantages though:
      EasyMDE seems to be more actively developed than SimpleMDE, which hasn't seen any updates for several years. You can define options for Inputfield EasyMDE. Inputfield EasyMDE can be used in Repeater fields and in custom fields for File/Image fields.  
      Inputfield EasyMDE
      EasyMDE (Easy Markdown Editor) as an inputfield for ProcessWire.
      EasyMDE is a Markdown editor with some nice features, allowing users who may be less experienced with Markdown to use familiar toolbar buttons and shortcuts. More information is at the EasyMDE website.

      Installation
      Install the Inputfield EasyMDE module.
      Usage
      Create a new textarea field, and in the "Inputfield Type" dropdown choose "EasyMDE". Save the field and if you like you can then configure the EasyMDE options for the field as described below.
      To convert Markdown to HTML you can install the core TextformatterMarkdownExtra module and apply the textformatter to the field. Alternatively you can use $sanitizer->entitiesMarkdown() on the field value, e.g.
      echo $sanitizer->entitiesMarkdown($page->your_field_name, ['fullMarkdown' => true]); Configuration
      On the "Input" tab of the field settings you can define EasyMDE options for the field in JSON format. Refer to the EasyMDE documentation for the available options. Keys in the JSON must be surrounded with double quotes.
      Example:
      "toolbar": ["bold", "italic", "heading", "|", "side-by-side"], "sideBySideFullscreen": false  
      https://github.com/Toutouwai/InputfieldEasyMDE
      https://processwire.com/modules/inputfield-easy-mde/
    • By d'Hinnisdaël
      ProcessWire Dashboard

      Download
      You can find the latest release on Github.
      Documentation
      Check out the documentation to get started. This is where you'll find information about included panel types and configuration options.
      Custom Panels
      The goal was to make it simple to create custom panels. The easiest way to do that is to use the panel type template and have it render a file in your templates folder. This might be enough for 80% of all use cases. For anything more complex (FormBuilder submissions? Comments? Live chat?), you can add new panel types by creating modules that extend the DashboardPanel base class. Check out the documentation on custom panels or take a look at the HelloWorld panel to get started. I'm happy to merge any user-created modules into the main repo if they might be useful to more than a few people.
      Roadmap
      Panel types Google Analytics Draft At a glance / Page counter 404s  Layout options Render multiple tabs per panel Chart panel load chart data from JS file (currently passed as PHP array)
×
×
  • Create New...