hello and welcome to pivic Pro YouTube video series in this video we'll explore how to install pivic Pro on a website showcasing several examples this video has a guest Anton who is implementation specialist at pic Pro and is often involved in helping our clients installing as well as implementing our platform so what we going to learn today we'll start with some basic pre-installation setting checks that is good to do before installing pivic Pro then we will learn how to install our platform via official pivic Pro WordPress plugin which is probably the easiest method of installation uh if your website happened to be built on WordPress after that we will show you an example of manual installation via CMS content management system and because WordPress has a plugin we will use jumla as our example then we'll explain how to install P Pro via GTM Google tag manager uh we're going to add there some important comments with information that you should be aware of if you're considering this method of installation finally Antonio will share some general comments on integrating pivic Pro with Frameworks using dedicated libraries I'm referring to Frameworks such as angular react nextjs or GS spy okay let's get to it hello everyone my name is miak I'm a product evangelist at pic Pro today I'm joined by Anton Bak uh Antonio would you mind to would you mind introducing yourself to our audience please yeah uh my name is Anthony I work at P Pro as an implementation specialist um as a QA process lead there um in general we usually run implementation projects for our Enterprise customers uh we also have a community forum and some other stuff like helping our product managers expand and better the product sounds good um okay so today uh I would like you to help us um go through different installation me methods but before we do that um is there anything that you would recommend checking uh in pivic Pro platform before installing pivic Pro is there anything that uh we should bear in mind before we do uh the installation before we start the process uh I don't want to go into depth but I would for sure um recommend um Consulting some privacy settings with your uh DPO or any other person that would be responsible for the legal SL data privacy side uh of your website or or of your business as a whole um that said there are also some things from a more technical side that you want to sure you are aware of um one pretty much most important thing um when installing the container is the awareness of um how the product uh is structured when you install the P Pro container uh we are talking about installing all the modules uh that means the tag manager the concept manager uh CDP if it's available for you and also the P Pro data collection um so the important thing here is um once you install the container uh our content manager uh form will pop up for you automatically uh perhaps you don't want to display it um uh as a first thing um perhaps you want to make some adjustments whether it comes to this styling coloring whatever it would be the text um maybe you want to hide it from for a second before publishing it um you can do this pretty easily in few steps um the first thing you want to do is go to the administration module once this done you want to go to the already created P Pro site go to the Privacy Tab and then go to constant settings under ask visitor for consent once we are here um you want to scroll down and you want to enable us a custom consent form setting once it's enabled you want to save the settings I'll close this down here because I have this already enabled and now um once the setting is enabled uh you should no longer see the content form on your website uh once you have everything set up uh the consent form looks good to you in the preview and the consent form editor you can come back here and simply disable it MH and that would mean that the consent form will be shown to the visitor uh could you also turn it off uh here uh at this very page as well uh what that switch next to the ask visitors for consent means uh can I turn it off in here as well and if so what is the difference um the difference here is pretty big and it's worth mentioning here um I um I chose you first show visitors with the cursor what uh setting uh I referring to uh M this setting here ask visitors for consent now the difference is pretty big because um if you decide to turn this setting off um all of the data that flows into Pig Pro will be de anonymized or not Anonymous by default um you you would have to manually anonymize it on your website and we can't really do this uh at the beginning you perhaps you don't have time to dig into the implementation yourself and so on uh so the safest thing you can do at the beginning is simply run this setting instead what this would do is only disable the front end the the displayed layer of the consent manager uh it would still mean that the all of the data um that flows into pck Pro is anonymous by default um when this setting is turned on you can really accept to tracking right that means you can't really be de anonymized mm on the contrary if you decide to disable this setting everything that flows into P Pro will be de anonymized or or not Anonymous by default M so you're basically tracking all the data with all the cookies Etc sounds good yes you don't want to do this right at the beginning okay thank you for the explanation okay so the first method uh of installation uh we going to uh show you how to install pivic Pro uh using Wordpress platform if you're familiar with that platform it's quite popular uh we're going to start with this one uh so Antony there are probably two ways to install pivic Pro on WordPress uh we have a plug-in but uh one could be tempted to install it uh let's say let's call it manually uh would you recommend uh Plug-In or manual installation uh what's your uh assessment of that um this could be quite Universal um I would generally advise um to always use an official plugin released by P Pro um that is for pretty much each um environment each um CMS whatever it would be uh if this there's a an official way available uh would' like to use it um now for the pros and cons there's pretty much very limited PR for using uh the manual method um it usually comes down to for example when you're um WordPress administrator um someone from from your company uh restricts uh adding plugins to your website or simply to your WordPress environment um for whatever reason um then yeah you should be using the manual method because you have no other way um but let's focus on the plugin today because that's what we recommend and that's what you simply use for pretty much um many reasons um one being that you get to have uh updates uh you don't have to update the code um uh manually uh you simply up update the plugin and the things uh show up automatically uh and there's also some cool stuff like the woocommerce uh integration which automatically automatically collects uh e-commerce events from your website you don't have to implement uh stuff like data layer like tags in our tag manager uh it's everything done automatically without like manual um labor not to mention it's much easier to install via plugin am I right yeah no need to code no need to edit your source code of the website okay uh any chance you could show us how to do that yeah sure um okay thank you so the first thing you we want to do here uh is enter our um WordPress uh dashboard or uh the wp admin section of your website um we want to install the plugin first let's show it uh we want to go to the plugins section uh there's no plugins available currently but um that's because there's a fresh WordPress installation so we want to go to the add new plugin then search for plugins and we want to search for pek Pro okay um you can see many results here uh what we want to do here is choose uh the one by P Pro so once you see it you can sorry click install now it can take um a couple of seconds and you can also already activate the plugin here okay um you should be able to tell whether the plugin is activated but by looking at the background it should be light blue or more precisely by seeing uh where you can deactivate the plugin here um you can also enable outo updates to the plugin if you want so um I usually um stick with um manually updating the plugin uh for whatever reason I prefer more control and checking my website for plug-in for plugin updates uh pretty often but that's up to you um okay so once the plugin is installed activated uh we want to go to the settings uh if you have installed the plugin previously you can also choose the plugin settings from this section here as you can see uh now um there are a few things you want to um configure here uh the first thing is the container address here uh you want to go to your pwork pro website and you want to copy um your instance address or your account address this is where you log to P Pro right so pretty much you can um you can go to your browser and uh you can copy the address here now we want to go back to our um admin dashboard in um in WordPress we want to go to this field here and paste the address uh want to make one modification here as you can see we should insert containers between the account name and the puck Pro so I'm going to do this like this containers okay once we have the address we also want to insert the site ID here um the site ID is also um located in your um Administration module of P Pro so we want to go back and go here um once you see this ID field here and overover over it you can see you can copy it by clicking here we want to go back to the admin dashboard and insert the side ID here so that's pretty much it for the basic settings um there's also some additional things we can set up here such as um selecting um which container we would like to add uh for each installation method you would most likely want to stick with installing the basic uh container the asynchronous container uh the additional container here the synchronous container is usually used for very specific things like AB testing Integrations uh or other things that should load synchronously but perhaps this topic uh should be discussed um in another video or somewhere else uh we're going to stick with the basic container for now because this this this is all we need uh we also can um change the data layer name to a different one we'll leave it on default um this will work for most setups and you can also enable the Ecommerce integration in case you are running a store a e-commerce store um I'm going to keep it for now even uh though I don't really um use a store here uh but this shouldn't uh impact anything um yeah so once we have everything that I mentioned uh let's recap the most important things here is the container address and the site ID once you have that you can click save Set uh changes as you can see we've saved uh settings and we should be able to check whether the container and the product works on your website um I'm going to open a new tab with the website and the first thing that should hit you let's call that as the Privacy the constant Banner here um by default we'll only display analex because there's no other consent types used in P Pro what if we uh decided not to uh not to uh present the consent form on the website how can we change check if the if the if we track anything what what is the is do we have any other options um yep um there's a couple of options let's go uh the easiest route um let's not uh focus on like developer staff um like checking requests and so on uh we have a very specific feature that helps you uh if you're a less technical person to verify whether the tracking works correctly um so the first the first thing you want to do is go back to your P Pro account now we want to go to the menu and select the analytics module once it's loaded um want to select the proper site uh it's set to demo site by default um we want to select WordPress YouTube demos okay you may see no data on dashboard yet um that's um thing we want to mention here is that this is not real time data it has to be processed it usually takes I know 30 minutes one hour until it shows up here um what we want to do to check the real time data is go to settings and then to tracker debugger on the left side here okay um this view should show you um real time data for sessions of visitors that um visit your website um the data can be shown for up to six hours and you can check multiple things here um starting with sessions station Dimensions something for a different video but the important thing here is would like to check um whether we are tracking the basic stuff the built-in stuff like page views so we did uh enter the page and that should be correct here time St also looks correct uh we also displayed the Conant form so it looks good to me um we can also see if um if we are seeing the Conant decision events so let's go back to the website and click accept all just to show that the contant is actually passed to peric Pro okay let's go back to P Pro and refresh the tracker debugger and as you can see we have granted full consent and Conant to analytics we didn't Define any tags in our tag manager that we use the other ones so this wouldn't show up here as yes we only use this one MH thank you Anton um that's uh brilliant thank you for this introduction uh let's move to another method okay uh now let's jump on to the uh jumla installation uh can you walk us through the process of installation of installing uh the pck pro on jumla um yeah sure uh first thing um I to mention here uh I'm not a druma expert by any means uh basically I want to show you how to install without any dependencies or on plugins that are not um created by P Pro sadly for jumla we don't have a dedicated plugin um I will show you how to install it directly in your website in the code it's not very hard as it seems um I'm going to show you each step here so um the first thing again we want to do here is go to menu and administration module then we want to select uh our P Pro side that this is that would be connected to the druma website um then what we want to go is want to go to installation tab now we want to select install manually and the tab will open up let's call it now what you what you see here um is what we call uh the P Pro container code um the container code pretty much consists of each um module available in P Pro um installing it should allow you to use each and every functionality that pig Pro offers and this is the most recommended and complimentary way of install P Crow on your website it says there that uh we need to copy and paste this code right after the opening body tag on every page of your site or app what I often uh got asked uh when I uh had a call with uh our clients uh they were Al they were always wondering if uh what does it mean installing it on the uh each and every page of your site or app uh does that mean that we need to install it on every page even like whenever we add a let's say a new new blog post do we need to add manually over there uh again and again uh that seems like a uh time consuming uh uh process uh how does it work can you expand on that what would be the good answer that you would give um yeah so um to answer your um question first um it's not really that we have to add it manually on each and every page so we have to add it manually on blog we have to manually add it on contact on the landing page and so on um most modern or even older um CMS systems for aworks uh or other um our website Frameworks uh support layouts um what does it mean simply is um you can place the code in one place and it will insert it on each page um to put it into perspective to give you a practical example if you go to the page you'll see that um in reality there's couple of um elements that are repeating themselves on each and every page right stuff like the header or um the nav navigation bar um this is the thing we want to access on pretty much every page if we scroll down we can see a footer uh we also see this on every page so these Frameworks this content Management Systems need to have a way to not force you into repeating the code right we want to be able to um add things in one place um and then this should be distributed for every page you visit M sounds good um okay so for the installation process um as mentioned before we want to first off land here in the installation tab of your P Pro website of your P Pro site and select install manually tab here uh let's not copy the code um right now we'll do it uh later uh let me show you first how to access um your theme in jumla uh so what we want to go is to do um what we want to do is to go to the um dashboard of your jumla uh website um and now we want to go to the system tab now we want to go to the site templates and we want to select your current template slash theme um you should be uh grey with some kind of like a file browser um what we want to look at right now is index.php right here on the left um now we should be able to see a code editor on your right side we don't want to open it in like a full window full screen because we're going to switch tabs anyway in a couple of moments um okay let's focus on the code here um what we want to do basically is scroll a bit until we see the body tag um you should be able to locate it pretty easily uh once you see the head tag that's closing um you should be able also to click control+ F to search for the body tag quickly let me show you all right you should jump directly to it once we uh insert it into the search bar let's close it for now okay once we have the body tag uh located the general recommendation for instanic p Pro is that it's added right after the body tag in the HTML code opens that means that is best to put it somewhere right here before any other element is inserted into the body okay um I have added a new line here just to indicate where we want to put it um don't really um I wouldn't really mention the the uh exact line here because depending on your theme on your customization the line could be different there could be much more code here uh we want to focus on searching for the body Tech um okay uh let's go back to the P Pro account and we should be able to copy the container code copy to clipboard as you can see we got a popup that it is uh let's go back to the drumlet dashboard and we want to paste in the container code right into the line we have just created um in reality if you have some technical experience and you perhaps would like to format the code a bit I mean add like couple of lines Capital spaces before or after the code uh switch yourself um I'm not going to do this uh right now because we're not uh very focused on the code readability right now now uh we want to just showcase how to easily install Okay so once we have the code inserted here uh you should be able to see that there's a beginning of the script tag and there's the ending of it once we have that we want to save and close the file right here as you can see the file has been saved and we want to check our website what the P Pro consent Banner shows up just like with WordPress okay I'm just going to refresh the Page by pressing F5 and as you can see the binary popped up looks good thank you so that was a jumla installation uh let's move on to the uh another uh method of in installing the pivic pro or another uh platform thank you okay so the next method of installing pivic Pro is uh via Google tag manager ER Google tag manager is quite popular platform uh so probably would be good to include it into in our um in this video uh so my first question is probably is it possible to install pivic Pro via Google tech manager um yep uh it's of course possible uh there are multiple reasons why you might do so to install P Pro through Google tag manager um for example uh you want to migrate from Google tag manager um to P Pro tag manager and uh you want to copy tags so on um you want to work with both to compare them or perhaps you want to keep them both for any uh possible reason um whether it's a shortterm or long-term SL permanent um thing um yeah the installation itself is um pretty easy in my opinion so let's let's see how it goes um yeah the first thing we want to do is actually go to our P Pro account and as always goes to uh Administration module I'm already here so I'm not going to click it uh we want to select our website our p site and then go to the installation tab once we are there uh want to open uh Google tag manager here and as you can see there are couple of steps we want to take here I'm not going to read everything here uh what we want to focus on is the step number seven um we are not going to copy the code for now uh because when we want to go through the steps here first I'm going to show you how it goes live of course um yeah so let's go back to Google tag manager first uh let's select TXS on the left and then go to new okay once you're here let's click on tag configuration and select custom HTML okay uh there's the HTML field here we're basically going to go back to the P Pro account and copy and paste and the container here um so let's go back P Pro account and click on copy to cboard and now back to Google tag manager and we want to paste the HTML in here okay once it's done I want to go to triggering and select all page views um for some more advanced um setups uh perhaps you want to um use the Google tag manager with another consent platform the trigger might be different but we are going to do a basic basic setup here so we're want to stick with all pages page to the default trigger here um once we have this uh we probably want to name the tag let's go here remove the placeholder and called P Pro container okay let's save and now we have the D saved here um I'm going to do um a preview of the website I don't need to push the changers already um maybe you want to submit the changes later for whatever reason um we are going to use the preview mode here okay let's click on it I've already entered the website so I have the address here but you might need to do this if if the address is not available in this field let's connect I quick loading time okay and after a while uh we can see that both the Google tag assistant is here and the P Pro content Banner is also here um for further debugging or whatever you'd like to um check uh when it comes to Google tag manager you can go back to tag assistant continue and verify where the tag was actually fired in Google tag manager as you can see under the tags fired category uh we can see that the P Pro container was added looks good uh seems rather easy um uh is there any benefit of using Google tag manager um or is there any drawbacks uh if there any uh would you mind elaborating on that okay um I wouldn't rate anything here I rather stick to um perhaps you need to use this tool for whatever reason or use another to tool for whatever reason uh let's stick with perhaps saying what could be the problem here um this is a bit of uh a a different installation because we're installing P Pro container so that means all of the modules such as analytics and CDP tag manager and consent manager uh through another tag manager which uh is not a very standard um installation method we usually do this directly in a we uh website source code or via a plugin right um there could be a few things you want to consider or simply keep it in your mind um first thing being is that we are nesting the tag managers um the first thing is you are uh adding um a d let's say double Mount of code to your website which could in some ways impact the loading uh speed of your website um you probably want to keep one of them in the end but if it works for you and perhaps your website is pretty fast in the beginning and you can um you can add this amount of code additional code to your website then you're good to go um the second thing is uh that you are nesting one tool in another one um now uh let's say you you have installed P Pro container uh through Google tag manager uh you have to keep in mind that in case the Google tag manager gets blocked it doesn't load for whatever reason it could be an out outage on the Google site you have to keep in mind that the P Pro container that is installed this way won't also load to your website um that means that if you're using uh P Pro consent manager the consent form won't show up for example right um I don't think this happens often but it's worth uh mentioning here um another more like technical Advanced uh I would say uh thing that power users U might want to know is that um if you're using the same data layer for both uh PE Pro tag manager and Google tag manager um you can for example get a bit flooded um data layer right you're getting events from both GTM and pig Pro tag manager at the same time um it can get a bit messy uh even um in case for example if you have some other events generated for from your website even get it can get even messure um that these are not these are not big blockers or anything but things uh worth keeping in your mind mhm okay thank you for that and now I know that there's a uh pivic Pro plugin that not plugin uh a template uh tag template uh that can be used with Google tag manager can you mention that as well in perhaps at uh your comment uh on that plug-in yeah sure um uh you're actually right uh it's uh in cont of Google tag manager we're talking about templates um in this specific example we're talking about community template um Community template because uh it's not added by Google themselves uh rather a third party so in this case uh P Pro um yeah so um the main difference here uh between the tag template the tag Community template uh is that uh it only adds the data collection part of per Pro what that means it only adds the tracking code we're missing out on the PC tag manager content manager and CDP uh in this case uh so the most recommended way of installing P Pro through Google tag manager would be installing the P Pro container code like we shown before right M um otherwise you are getting only a part of the P Pro experience uh which I don't know if you want to um there's also another thing um that puic Pro tag manager is uh closely synchronized with other modules um CDP triggers uh like audience triggers uh reflecting things from the administration settings everything is synchronized automatically once you save the settings in the administration module you'll see them pretty much instantly uh in the tag manager in the P Pro tag it's very useful if you don't want to mess around with custom code or um or any custom implementation of sorts so all in all basically using this template uh unless there's a good reason for it is not recommended because it strips down the the entire pivic Pro platform off of it uh most popular features CD CDP consent manager uh tag manager and uh primarily pretty much uh a lot of settings that uh wouldn't work uh if we were to to install it via template so uh it's the least recommended way of installing yeah yeah exactly there may be some specific needs uh for when you want to install it perhaps you only want to test how the tracking P Pro works or you want to for other reasons keep only the tracking code maybe I should show you how to find the template just just so you know okay uh we're staying in the uh same view as before we also want to go to the new button here uh when go to tag configuration again go to community template Gallery once it loads we want to go to the search bar here and type in pck Pro and as you can see there's the template um it's worth checking whether uh the template is verified it means that uh template is coming from Pig Pro and not some other third party uh for whatever reason they would add the template here um once you have it located just click on it and add to your workspace sounds good thank you very much thank you Antony thank you okay Antony uh I think uh We've covered a lot today but uh I would like you to uh perhaps share some thought thoughts on uh some Frameworks uh because uh nowadays A lot of the websites modern website especially use uh popular Frameworks such as uh such as angular such as react and and um what does it uh what is uh perhaps recommended method of installing pivic Pro here and uh um if you could expand on the installation process uh in those kind of websites what is the difference uh anything that you believe would be good to know for the anybody who is using such Frameworks okay um sure um there's actually a couple of um Frameworks that let's say p Pro supports uh as you mentioned angular react uh but also nextjs and um gby some of them um and the general rule of Thum here would be very similar that we what we said before um of course you can use the manual method um um like we said before you can try to insert that PR container directly in the uh source code of um of react or angular you could in this case struggle bit with uh uh having having to find out where exactly uh in the application you should insert it all right there's a lot of things like templates layouts and xjs um just a lot of moving Parts which make it a bit more difficult than with the older types of websites or applications right um yeah that was probably the main point why our sdks were developed to help make the installation process and the tracking process in general um easier for our clients um that are using those Frameworks um I don't want to go through all of them because uh um the the rule here would be similar uh why would maybe generally what what is all all about yeah yeah yeah in examples like angular or react we're talking a bit about a bit different website um rendering uh or with nextjs and and server side rendering uh something may be different where we render the site on the server site like 20 years ago or uh in some other applications where we rendered a website on client site um yeah uh as I said before a lot of moving Parts um the one of the biggest um advantages of using those as a case is the proper container initialization on each page you don't have to to worry um that you have inserted uh it in the wrong file in the wrong place in your source code uh you follow the guidelines pretty much insert two or three lines of code um add the account name and a site your ID and you should be good to go with the basic tracking um basic tracking that is um because we also provide some additional things um such as uh dedicated services or methods that you can use um um to um track events directly um in your react or angular app or whatever and SDK would be um what I mean here is stuff like custom events Ecommerce events um there are for sure things in your um application from one of those Frameworks um that could not be caught with um tag manager whether it's p Pro or Google tag manager uh they are parts of the uh react life cycle or uh how the code is rendered that could be inaccessible outside of the application um that's why we provide um services that could allow you to hook into um hook into those places and track events right there um other than that let's call smaller things but I think appreciated by many developers uh such as the typescript uh integration uh it for sure makes their life easier um when it comes to not making mistakes and uh not committing bugs to your uh source code um and yeah and that's about it um the the the biggest Point here is the ease of installation and uh the feeling that you you have done it proper way um and later on there are some other Adventure this but uh this is the biggest one in my opinion thanks very much uh I I think uh uh that that was that was quite comprehensive so thanks very much thanks for watching if you enjoyed this video please consider liking it and subscribing to our Channel check the description below to find some useful links like free pivic Pro signup page Community Forum page and links to related videos until next time