Google Analytics. Synchronization with pixels Facebook, VK, Yandex, MyTarget

Hi, Habr! Over time, marketers begin to want to do remarketing funnels on events, and then also pursue all channels.

To start remarketing - in each of the systems you need to customize the collection of audiences. And in order to be less confused with them, I propose a solution - to make a single format for events, according to which audiences will be formed.

To make it easier to scale remarketing to other systems, we will now synchronize GA events to Metric, Facebook, VK, MyTarget.
')

Go!

// we will not consider the installation of counters and pixels, we believe that you have already configured them through Google Tag Manager

If you’ve already worked with re-marketing on Google Ads, then most likely you already have a directory of events for which remarketing audiences were created:


(description of GA-events for which remarketing audiences were tuned)

How to send events to other systems

Yandex.Metrica

yaCounterXXXXXX.reachGoal('customeventname'); 

→ Help

Facebook

 fbq('track', 'customeventname'); 

→ Help

VK

 VK.Retargeting.Event('customeventname'); 

→ Help

MyTarget (Top.Mail.ru)

 var _tmr = window._tmr || (window._tmr = []); _tmr.push({ id: 'counterID', type: 'reachGoal', goal: 'arrows' }); 

→ Help

We understand that we need data: Event Category, Event Action, Event Label, which we merge into the string% ec% _% ea% _% el%

How Google Analytics collects information

As a whole, information is collected by the GA counter;

When a configured event is triggered, a request like this flies to Google Analytics:

 https://www.google-analytics.com/collect?v=1&_v=j72&a=557659108&t=event&ni=0&_s=1&dl=http%3A%2F%2Fgtm1.marketello.ru%2F&ul=en-us&de=UTF-8&dt=Marketello%20GTM%20%E2%80%94%20Just%20another%20WordPress%20site&sd=24-bit&sr=1920x1080&vp=743x978&je=0&ec=ecaterogy&ea=eaction&el=elabel&_u=SACAAEAB~&jid=&gjid=&cid=976245273.1518533705&tid=UA-108448586-6&_gid=55313625.1542000243&gtm=2wgas3TT5B95L&z=2122252649 

Here are the parameters from the query in a more understandable form:

 v: 1 _v: j72 a: 557659108 t: event ni: 0 _s: 1 dl: http://gtm1.marketello.ru/ ul: en-us de: UTF-8 dt: Marketello GTM — Just another WordPress site sd: 24-bit sr: 1920x1080 vp: 743x978 je: 0 ec: ecaterogy ea: eaction el: elabel _u: SACAAEAB~ jid: gjid: cid: 976245273.1518533705 tid: UA-108448586-6 _gid: 55313625.1542000243 gtm: 2wgas3TT5B95L z: 2122252649 

A description of all the parameters can be found in the official certificate .

We are interested in the parameters: ec (Event Category), ea (Event Action), el (Event Label).

Passing parameters to a GTM variable

If you are just starting to work with Google Tag Manager - watch the video version of this manual .

Create CustomTask variable

Open the section Variables in GTM. Create a new variable of type Custom JavaScript. I will call this variable CustomTask.

 function () { return function(tracker) { var originalSendHitTask = tracker.get('sendHitTask'); tracker.set('sendHitTask', function(model) { originalSendHitTask(model); var hitPayload = model.get('hitPayload'); //        console.log(hitPayload); //   ,     var GaEventVars = {}; //        hitPayload.replace(/([^=&]+)=([^&]*)/g, function(m, key, value) { GaEventVars[decodeURIComponent(key)] = decodeURIComponent(value); }); //      DataLayer   'GaEventParams'   gtm- GaEvent window.dataLayer.push({'event':'GaEvent', 'GaEventParams': GaEventVars}); }); } } 

We’ll add this variable to our Google Analytics tracker in customTask. Read more about the tasks you can read in the help .

We connect customTask to the Google Analytics counter

Open the global settings of Google Analytics (this section Variables in GTM). In the More Settings section, select Fields to Set. We call the Field Name: customTask (required in this format). And in the value of our variable {{customTask}}:



Check that all Google Analytics events that are configured in GTM are using
GA global settings.

After these settings, each time Google Analytics hits (for example, a page view or an event), we’ll see a new GTE event GaEvent in the Tag Manager Debugger, with a full list of parameters:



Setting up a variable from DataLayer

Open the section Variables in GTM. Create a new variable of type “DataLayer variable”. The name is the same as the one that hit the event - GaEventParams.



We update our test page, check that the variable appeared in the Debug-window:



Setting the trigger GaEvent

In GTM, open the Triggers section, create a new one that will work on an event. Trigger type - Custom Event. The event name is GaEvent (yes, this is an event that we sent to DataLayer from a function in customTask).



Customizing the tag that events will send to other systems

We are going to customize the tag that will send events to the systems.

We call the tag Send Ga Event to Ads, type Custom HTML. Let's assign a GA Event trigger. And add the content:

 <script> (function(){ var gaEventParams = {{GaEventParams}}; console.log(gaEventParams); //     if(gaEventParams.t == "event") { //   ( ec,ea,el   ) var event_name = gaEventParams.ec + '_' + gaEventParams.ea + '_' + gaEventParams.el; //     try { yaCounter51115808.reachGoal(event_name); } catch (e) {} //   Facebook try { fbq('track', event_name); } catch (e) {} //   VK try { VK.Retargeting.Event(event_name); } catch (e) {} //   MyTarget (Mail.ru) try { var _tmr = window._tmr || (window._tmr = []); _tmr.push({ id: 3067973, type: 'reachGoal', goal: event_name }); } catch (e) {} } })(); </script> 

Open the browser, perform the action on which the event flew only in GA, and see that the requests flew to other services:



Thus, you will not need to connect events separately for each system. It is enough to configure a new event in GA and it will automatically be sent to other systems.

You just have to set up conditions for the formation of remarketing audiences for events in advertising cabinets.

Successes!