My epic story of setting goals for a Bitrix site
Friends, do you like setting goals as I “love” her? For me, this business is always difficult and dreary, there is almost no information on this on the Internet, and the topic, in my opinion, is important. Today my post is dedicated to setting the goals of the site on Bitrix, if you like the post, I’ll tell you about other CMS
1.1. Why do you need goals on the site?
Goals must be set up in order not only to look at the attendance schedule, but to understand which channel is effective and which is not.
I’ll quote from Google Help: “ Goals are a great indicator of the performance of your website or application. The goal can be any action you are interested in, called conversion. Here are some examples of goals: buying (for an e-commerce site), passing a game level (for a mobile gaming application), sending contact information (for a customer attraction site).
Targeting is an essential component of analytical evaluation planning. Properly selected goals allow you to get important information, such as the number of conversions and the conversion rate for the site or application. Without this information, it is almost impossible to assess the effectiveness of online business and marketing campaigns. ” Support.google.com/analytics/answer/1012040?hl=en
Configure only those goals that you really will analyze and track. For example, registration, sending contact information, request a callback and other actions that potentially lead to the sale can be considered goals. The goal, which is triggered when a visitor views two pages, or stays on the site for more than three minutes, is in fact not goals. "
1.2. What are your goals?
Basic goals
- purchase of goods
- send contact information
- call
')
Auxiliary goals
-view product card
- viewing of contacts
-view 3 pages
1.2. Well ... I have counters, why do I need more goals?
Despite the fact that you have configured statistics counters, they will not be able to track everything. Services track mainly pageviews. And the most delicious remains behind, such as clicks, form submissions, and other more complex events (for example, “registration on the site, confirmed by e-mail”)
So, in the figure we see that
“Page views” are immediately sent to analytics, and everything is in order
“Clicks, submitting forms” can be tracked using the Google Tag Manager. In practice, it is not always easy to set up tracking of a valid form submission.
“Complex events” is something that cannot be traced by previous means. To track them into the site code, small java script codes are embedded in the right places, which send the necessary information to the analytics.
It should be noted that for each system that needs information on accomplishing the goal, you need to insert your own command into the code. And here we are in danger: after everything is set up, debugged and checked, there is a need to send data somewhere else. And to do this, you will have to go everywhere where we have already inserted codes. In other words, do all the work twice.
In this case, Google Tag Manager comes to the rescue.
1.3. Why do you need Google Tag Manager?
Installing only one code, all the restcan be installed through it.
- Allows you to track clicks, clicks on links, submitting a form, etc.
- Allows you to create your own rules to call the right codes at the right time.
- Allows you to send data on the achievement of goals anywhere.
Thanks to Tag Manager, a more convenient and correct scheme for setting goals appears:
This method allows you to scale the work you have done on any system in which you need data on the achievement of your goals.
1.3.1. How to install Google Tag Manager?
The only correct way is to install after the opening tag body and not including it in any other blocks.
Then the code will work immediately. And all you need to activate at the end of the assembly model DOM, or when the page loads completely, you can easily customize the rules Tag Manager
1.3.2. What is usually installed through GTM?
All third-party codes, for example:
- Counter codes GA, YM
- Additional services UpToCall, Jivosite, etc.
- Retargeting codes for social networks.
etc
1.4. What code should be inserted on the site to track the achievement of goals?
The commands you need to insert are very simple.
2. Setting goals in Bitrix
Honestly, I would implement all the forms on the site through “mounted services”, there would be less problems. On our site is a handler JotForm adverbs.ru/feedback and I can blindly configure all the goals. On the CMS, all forms are always implemented differently and sometimes, excuse me, not through that place :-) Here I will try to describe in steps the process of setting up several goals using the example of a real project.
At once I will say that I am not a Bitrix programmer. If in my words below there will be mistakes in the terminology or the proposed solutions, please do not shower me with tomatoes, but prompt or correct in comments. I will be megablagodalen :-)
2.1. We will be defined with the list of the purposes
Before you begin setting goals, you need to decide on the goals themselves.
Do not be lazy and make a list of goals with their name, description, links, screenshots and comments. I assure you in a month you don’t remember what you did and why. After several dozen iterations, our goal file looks like this:
Looking ahead, I’ll say that Google Tag Manager allows you to track many different events without editing the site code. However, in practice, all the same many goals have to be configured by adding additional codes to the source code of the site.
2.2. Where to insert the code in the bitrix?
At each site and in each CMS, this will have to be done in different places. If you do not understand anything in programming, then you definitely need a programmer.
Moreover, I will say that even for any site written in Bitrix, you will most likely have to insert codes in different places. And even for different forms of the same site it will be different places, especially if several programmers conjured and shamanized over the site at different times :)
So let's start, friends, to practice :-) We will take a look at the example of the “live” project a-tria.ru. The goals described in the table above are just for him. We enter the admin site.
2.3. Setting the goal “Order a call”
2.3.1. Insert target code “Order a call”
The goal must be triggered NOT by clicking on a button, but upon successful sending of form data.
Usually, if some part of the site is a component, then when you hover the mouse cursor on it, a pop-up menu appears. As in the picture below.
But when you hover over a call order form, nothing appears, so you can assume that the form is somehow “sewn up” in the site template.
Open for editing the site template.
We find in it the text “Request a call back”
And we see that the link opens the page at / modal-forms / call-back /
Well, let's look there
Here we see that the z-labs component is included in the template for this page: ajax.call_order
You can find it here: /bitrix/components/z-labs/ajax.call_order
But what we needed was a bit deeper in the template of this component, here: /bitrix/components/z-labs/ajax.call_order/templates/call-back/template.php
After viewing the file, a place was found where a message about the successful submission of the form is displayed. Next to it, we inserted the code that sends data about the accomplishment of the target action:
yaCounterXXXXXXXX.reachGoal ('forms_zvonok'); where
XXXXXXXX- the number of your Yandex metrics counter
forms_zvonok is the goal identifier in your Yandex metric.
More detailed information on the transfer of information on the achievement of the goal in Yandex metric: yandex.ru/support/metrika/objects/reachgoal.xml
ga ('send', 'event', 'forms', 'zvonok');
where
'event' - the type of ecent call indicates that we are sending an event to the analytics
'forms' - category,
'zvonok' is the action for which your analytics aims are set.
Learn more about tracking events in Google Analytics: developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=en
2.3.2. Setting the goal “Order a call” in Google Analytics
In Google Analytics, go to the tab “Administrator” → “Goals”
- Indicate that the target will be “Special”.
- Specify the name: “Callback” and the type of target “Event”.
- Specify the details of the goal. “Forms” category, Action: “zvonok”
2.3.3. Setting the goal “Order a call” in Yandex metric
In the Yandex metric, setting up a goal is at least as simple. Go to the “Settings” → “Goals”
Specify “Name”: “Callback”, Condition type: “JavaScript event”, target ID: “forms_zvonok”
2.4. Setting the goal “Form to participate in the action”
2.4.1. Insert target code “Form to participate in the action”
Editing the template
The text “Participate in the action” was found, but there are no links like last time.
Perhaps pressing is handled by a plugin script. Let's see what connects to this file:
In addition to standard scripts, some script.js is connected.
Here we find the definition of the function that will be triggered when clicking on an element with the “callbutton” classes. It is this class that is set on the button we need.
Below we see the code responsible for sending the message.
Insert the code that sends data on the achievement of the goal.
2.4.2. Setting the goal “Form to participate in the action” in Google Analytics and Yandex metric
Similarly, we add goals to Yandex and Google. Yandex metric identifies the goal “forms_akciya”, in Google analytics event with identifiers “forms”, “akciya”
2.5. How to understand that the code sends data?
I think that any programmer will tell you that it is impossible to write code if you do not have debugging tools. Not everyone knows about it, but there are debugging tools here.
2.5.1. Debugging in Yandex.Metrica
In order to see whether the data is being sent to Yandex.Metrica, you need to enter the address of the site where you are setting goals in the address bar of the browser and add a debugging parameter: www.site.ru/?_ym_debug=1
Open the code inspector tab “Console”. When you perform a targeted action on the site, you will see messages that the data is being sent.
2.5.2. Debugging in Google Analytics
Google Analytics has a slightly different way to check if data is being sent to analytics. For this, there are reports in “real time” -> “Events”
Looking through this report, we almost at the same second will see a visual display when performing a targeted action on the site. If it is not, then something is wrong.
2.5.3. Debugging in Google Tag Manager
Incredibly, but the fact is, GTM also has a debugging system, and quite a good one.
In the interface next to the “Publish” button, click on the arrow. In the menu that opens, select “Preview and Debug”.
After switching to debug mode, in the same browser you need to open the site for which you are setting up goals. The GTM debug panel will open in the same window.
Here you will see all the events that Google Tag Manager captures, as well as which tags have been activated for these actions.
3. Instead of an epilog ...
We have dealt with the general correct scheme for setting up goals and analyzed the steps for setting up two goals for a real project.
Finally, I want to give some tips:
- Do everything gradually, after each step, checking that everything is done correctly and works.
- Identifiers for the purposes of Google and Yandex, make the same, with identical spelling. If the identifier for Yandex is “forms_zvonok”, then for Google identifiers must be “forms”, “zvonok”, otherwise it will lead to confusion.
- Let's get clear names for the purpose, i.e. Names should be such that any person looking at them can tell you what these goals are. For example, if the goal is triggered when sending the form “order a call”, then let the name be “Form - Order a call”. If the goal is triggered when you click on the button “Order a call”, and it does not matter whether it sent the form or not, name the goal “Button - Order a call”. Or invent any other understandable principle of naming.
- Use only Latin small letters and underscores in the name of identifiers. So it will be less likely to make a mistake in writing and you will not spend the extra couple of hours searching for bugs.
- Be sure to write down everything you have done, for example, in the goal setting table
- At first, it is better to do less, but so that it works clearly, than a lot, but it works through time and it is not clear how.
PS: I will be grateful for any comments :-)
1.1. Why do you need goals on the site?
Goals must be set up in order not only to look at the attendance schedule, but to understand which channel is effective and which is not.
I’ll quote from Google Help: “ Goals are a great indicator of the performance of your website or application. The goal can be any action you are interested in, called conversion. Here are some examples of goals: buying (for an e-commerce site), passing a game level (for a mobile gaming application), sending contact information (for a customer attraction site).
Targeting is an essential component of analytical evaluation planning. Properly selected goals allow you to get important information, such as the number of conversions and the conversion rate for the site or application. Without this information, it is almost impossible to assess the effectiveness of online business and marketing campaigns. ” Support.google.com/analytics/answer/1012040?hl=en
Configure only those goals that you really will analyze and track. For example, registration, sending contact information, request a callback and other actions that potentially lead to the sale can be considered goals. The goal, which is triggered when a visitor views two pages, or stays on the site for more than three minutes, is in fact not goals. "
1.2. What are your goals?
Basic goals
- purchase of goods
- send contact information
- call
')
Auxiliary goals
-view product card
- viewing of contacts
-view 3 pages
1.2. Well ... I have counters, why do I need more goals?
Despite the fact that you have configured statistics counters, they will not be able to track everything. Services track mainly pageviews. And the most delicious remains behind, such as clicks, form submissions, and other more complex events (for example, “registration on the site, confirmed by e-mail”)
So, in the figure we see that
“Page views” are immediately sent to analytics, and everything is in order
“Clicks, submitting forms” can be tracked using the Google Tag Manager. In practice, it is not always easy to set up tracking of a valid form submission.
“Complex events” is something that cannot be traced by previous means. To track them into the site code, small java script codes are embedded in the right places, which send the necessary information to the analytics.
It should be noted that for each system that needs information on accomplishing the goal, you need to insert your own command into the code. And here we are in danger: after everything is set up, debugged and checked, there is a need to send data somewhere else. And to do this, you will have to go everywhere where we have already inserted codes. In other words, do all the work twice.
In this case, Google Tag Manager comes to the rescue.
1.3. Why do you need Google Tag Manager?
Installing only one code, all the rest
- Allows you to track clicks, clicks on links, submitting a form, etc.
- Allows you to create your own rules to call the right codes at the right time.
- Allows you to send data on the achievement of goals anywhere.
Thanks to Tag Manager, a more convenient and correct scheme for setting goals appears:
This method allows you to scale the work you have done on any system in which you need data on the achievement of your goals.
1.3.1. How to install Google Tag Manager?
The only correct way is to install after the opening tag body and not including it in any other blocks.
Then the code will work immediately. And all you need to activate at the end of the assembly model DOM, or when the page loads completely, you can easily customize the rules Tag Manager
1.3.2. What is usually installed through GTM?
All third-party codes, for example:
- Counter codes GA, YM
- Additional services UpToCall, Jivosite, etc.
- Retargeting codes for social networks.
etc
1.4. What code should be inserted on the site to track the achievement of goals?
The commands you need to insert are very simple.
2. Setting goals in Bitrix
Honestly, I would implement all the forms on the site through “mounted services”, there would be less problems. On our site is a handler JotForm adverbs.ru/feedback and I can blindly configure all the goals. On the CMS, all forms are always implemented differently and sometimes, excuse me, not through that place :-) Here I will try to describe in steps the process of setting up several goals using the example of a real project.
At once I will say that I am not a Bitrix programmer. If in my words below there will be mistakes in the terminology or the proposed solutions, please do not shower me with tomatoes, but prompt or correct in comments. I will be megablagodalen :-)
2.1. We will be defined with the list of the purposes
Before you begin setting goals, you need to decide on the goals themselves.
Do not be lazy and make a list of goals with their name, description, links, screenshots and comments. I assure you in a month you don’t remember what you did and why. After several dozen iterations, our goal file looks like this:
Looking ahead, I’ll say that Google Tag Manager allows you to track many different events without editing the site code. However, in practice, all the same many goals have to be configured by adding additional codes to the source code of the site.
2.2. Where to insert the code in the bitrix?
At each site and in each CMS, this will have to be done in different places. If you do not understand anything in programming, then you definitely need a programmer.
Moreover, I will say that even for any site written in Bitrix, you will most likely have to insert codes in different places. And even for different forms of the same site it will be different places, especially if several programmers conjured and shamanized over the site at different times :)
So let's start, friends, to practice :-) We will take a look at the example of the “live” project a-tria.ru. The goals described in the table above are just for him. We enter the admin site.
2.3. Setting the goal “Order a call”
2.3.1. Insert target code “Order a call”
The goal must be triggered NOT by clicking on a button, but upon successful sending of form data.
Usually, if some part of the site is a component, then when you hover the mouse cursor on it, a pop-up menu appears. As in the picture below.
But when you hover over a call order form, nothing appears, so you can assume that the form is somehow “sewn up” in the site template.
Open for editing the site template.
We find in it the text “Request a call back”
And we see that the link opens the page at / modal-forms / call-back /
Well, let's look there
Here we see that the z-labs component is included in the template for this page: ajax.call_order
You can find it here: /bitrix/components/z-labs/ajax.call_order
But what we needed was a bit deeper in the template of this component, here: /bitrix/components/z-labs/ajax.call_order/templates/call-back/template.php
After viewing the file, a place was found where a message about the successful submission of the form is displayed. Next to it, we inserted the code that sends data about the accomplishment of the target action:
yaCounterXXXXXXXX.reachGoal ('forms_zvonok'); where
XXXXXXXX- the number of your Yandex metrics counter
forms_zvonok is the goal identifier in your Yandex metric.
More detailed information on the transfer of information on the achievement of the goal in Yandex metric: yandex.ru/support/metrika/objects/reachgoal.xml
ga ('send', 'event', 'forms', 'zvonok');
where
'event' - the type of ecent call indicates that we are sending an event to the analytics
'forms' - category,
'zvonok' is the action for which your analytics aims are set.
Learn more about tracking events in Google Analytics: developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=en
2.3.2. Setting the goal “Order a call” in Google Analytics
In Google Analytics, go to the tab “Administrator” → “Goals”
- Indicate that the target will be “Special”.
- Specify the name: “Callback” and the type of target “Event”.
- Specify the details of the goal. “Forms” category, Action: “zvonok”
2.3.3. Setting the goal “Order a call” in Yandex metric
In the Yandex metric, setting up a goal is at least as simple. Go to the “Settings” → “Goals”
Specify “Name”: “Callback”, Condition type: “JavaScript event”, target ID: “forms_zvonok”
2.4. Setting the goal “Form to participate in the action”
2.4.1. Insert target code “Form to participate in the action”
Editing the template
The text “Participate in the action” was found, but there are no links like last time.
Perhaps pressing is handled by a plugin script. Let's see what connects to this file:
In addition to standard scripts, some script.js is connected.
Here we find the definition of the function that will be triggered when clicking on an element with the “callbutton” classes. It is this class that is set on the button we need.
Below we see the code responsible for sending the message.
Insert the code that sends data on the achievement of the goal.
2.4.2. Setting the goal “Form to participate in the action” in Google Analytics and Yandex metric
Similarly, we add goals to Yandex and Google. Yandex metric identifies the goal “forms_akciya”, in Google analytics event with identifiers “forms”, “akciya”
2.5. How to understand that the code sends data?
I think that any programmer will tell you that it is impossible to write code if you do not have debugging tools. Not everyone knows about it, but there are debugging tools here.
2.5.1. Debugging in Yandex.Metrica
In order to see whether the data is being sent to Yandex.Metrica, you need to enter the address of the site where you are setting goals in the address bar of the browser and add a debugging parameter: www.site.ru/?_ym_debug=1
Open the code inspector tab “Console”. When you perform a targeted action on the site, you will see messages that the data is being sent.
2.5.2. Debugging in Google Analytics
Google Analytics has a slightly different way to check if data is being sent to analytics. For this, there are reports in “real time” -> “Events”
Looking through this report, we almost at the same second will see a visual display when performing a targeted action on the site. If it is not, then something is wrong.
2.5.3. Debugging in Google Tag Manager
Incredibly, but the fact is, GTM also has a debugging system, and quite a good one.
In the interface next to the “Publish” button, click on the arrow. In the menu that opens, select “Preview and Debug”.
After switching to debug mode, in the same browser you need to open the site for which you are setting up goals. The GTM debug panel will open in the same window.
Here you will see all the events that Google Tag Manager captures, as well as which tags have been activated for these actions.
3. Instead of an epilog ...
We have dealt with the general correct scheme for setting up goals and analyzed the steps for setting up two goals for a real project.
Finally, I want to give some tips:
- Do everything gradually, after each step, checking that everything is done correctly and works.
- Identifiers for the purposes of Google and Yandex, make the same, with identical spelling. If the identifier for Yandex is “forms_zvonok”, then for Google identifiers must be “forms”, “zvonok”, otherwise it will lead to confusion.
- Let's get clear names for the purpose, i.e. Names should be such that any person looking at them can tell you what these goals are. For example, if the goal is triggered when sending the form “order a call”, then let the name be “Form - Order a call”. If the goal is triggered when you click on the button “Order a call”, and it does not matter whether it sent the form or not, name the goal “Button - Order a call”. Or invent any other understandable principle of naming.
- Use only Latin small letters and underscores in the name of identifiers. So it will be less likely to make a mistake in writing and you will not spend the extra couple of hours searching for bugs.
- Be sure to write down everything you have done, for example, in the goal setting table
- At first, it is better to do less, but so that it works clearly, than a lot, but it works through time and it is not clear how.
PS: I will be grateful for any comments :-)
Source: https://habr.com/ru/post/300810/
All Articles