CampaignSuite bevat een zeer uitgebreid systeem om metingen bij formulieren in te stellen. Denk hierbij aan bijvoorbeeld Client Side en Server Side events op bepaalde momenten in een formulier. Deze momenten kunnen bijvoorbeeld zijn wanneer je van pagina wisselt in een formulier of als er een succesvolle betaling heeft plaatsgevonden.
Er zijn in totaal 6 momenten waarop je kunt bepalen dat er iets gemeten moet worden door één van de vier aanbieders (Facebook, Google Analytics 4, Squeezely of Google Tag Manager). Het is mogelijk om meerdere acties aan te maken per formulier.
Bekijk onderstaande artikelen om meer informatie te verkrijgen over de opties van metingen.
CampaignSuite contains a very extensive system for setting measurements on forms. Think for example of Client Side and Server Side events at certain moments in a form. These moments can be, for example, when you switch pages in a form or when a successful payment has taken place.
There are a total of 6 moments when you can determine that something needs to be measured by one of the four providers (Facebook, Google Analytics 4, Squeezely or Google Tag Manager). It is possible to create multiple actions per form.
Check out the articles below to learn more about measurement options.
Om een nieuw meet moment aan te maken open je een formulier in WordPress en ga je naar Instellingen -> Metingen. Klik vervolgens op de knop Nieuwe toevoegen.
Dit opent een nieuw venster met de volgende opties:
Actie naam
Vul hier een herkenbare naam in binnen het systeem. Deze naam zal niet getoond worden op de website of in een waarde van een meting.
Type event
Kies hier uit één van de zes momenten waarop de meting moet plaatsvinden. Elk moment kan een Client Side call, een Server Side call of beiden uitvoeren. De momenten waaruit je kunt kiezen zijn:
Aanbieders
Kies hier welke aanbieders je iets wilt laten meten op het aangegeven moment. De opties hier zijn:
Feed voorwaarde
Het is tevens mogelijk om deze Feed actie conditioneel te maken. Dat houdt in dat de feed alleen zal worden uitgevoerd als er aan bepaalde condities wordt voldaan.
Als alle instellingen zijn gedaan klik je op Refresh om de mapping te tonen van de gekozen aanbieders. Deze mapping is nodig om het systeem te laten weten welke data waar te vinden is in het formulier. Kijk verder bij het artikel Mapping om te ontdekken welke mogelijkheden er zijn.
To create a new measurement moment, open a form in WordPress and go to Settings -> Measurements. Then click the Add new button.
This will open a new window with the following options:
Action name
Enter a recognizable name within the system here. This name will not be displayed on the website or in a measurement value.
Type of event
Choose here from one of the six moments at which the measurement should take place. An event can make a Client Side call, a Server Side call, or both. The moments you can choose from are:
Providers
Choose here which providers you want to have something measured on the specified event. The options here are:
Feed condition
It is also possible to make this Feed action conditional. This means that the feed will only be executed if certain conditions are met.
When all settings are done, click on Refresh to display the mapping of the chosen providers. This mapping is necessary to let the system know which data can be found where in the form. Look further at the article Mapping to discover the possibilities.
Als er een verbinding met Marketing Cloud is opgezet is het ook mogelijk om Dynamische Content uit een Marketing Cloud Page op een pagina te zetten in de website. Dit gaat aan de hand van een wrapper blok genaamd Dynamic Content Wrapper.
Dit blok heeft verschillenden instellingen in de rechterkolom:
Code type
Dynamische content moet altijd opgehaald worden o.b.v. een campagne code. Deze waarde kan op verschillende manieren meegestuurd worden naar Marketing Cloud:
Pagina veld
De code zal worden opgehaald uit het veld Campagne Code onder het blok CampaignSuite instellingen van de pagina
Custom
De code kan handmatig ingevuld worden op het Dynamic Content Wrapper blok.
Maak campagne code dynamisch
Het is ook mogelijk om de code uit de URL van de pagina te halen. Vink daarvoor deze optie aan en vul de parameter naam in uit de URL waar de campagne code in staat.
Content type
Er zijn momenteel 3 content types beschikbaar voor dynamisch content:
Formulier pagina
Dit is content wat vaak te vinden is op een campagne pagina.
Bedankpagina
Dit is content wat getoond kan worden op de bedankpagina na een donatie
Next best action
Dit is content wat gebruikt kan worden voor mogelijke next best actions van een donateur.
Toon geavanceerde instellingen
Onder geavanceerde instellingen is het mogelijk om een custom endpoint in te stellen. Dit endpoint zal dan het default ingesteld endpoint bij CampaignSuite instellingen overrulen.
Tevens kan er gekozen worden of dit dynamische blok Client side of Server side gerenderd moet worden.
Client side
Standaard worden de teksten en afbeeldingen in een Dynamic Content Wrapper via javascript ingeladen. Om er voor te zorgen dat de bezoeker niet een verspringen van de content ziet, zal de volledige inhoud van de pagina eerst verborgen worden. Zodra alle dynamisch content is geladen zal de pagina zichtbaar worden.
Server side
Bij deze optie zal de server eerst een call doen naar Marketing Cloud om de dynamische content op te halen. Vervolgens zal alle content worden vervangen in de blokken. Uiteindelijk zal de complete pagina geladen worden.
Het grootste verschil tussen Server en Client side is het feit dat bij Server side de pagina ‘blijft laden’ totdat alle content is vervangen. Bij Client side is de pagina klaar met laden en zal de bezoeker nog een korte tijd (maximaal 1 seconde) een witte pagina zien. Tevens kunnen cache plugins er voor zorgen dat Server side pagina’s niet dynamisch gevuld kunnen worden.
De volgende Gutenberg blokken binnen een wrapper kunnen dynamische content bevatten:
– Header
– Paragraaf
– Afbeelding
– Cover afbeelding
– Button
Zodra één van de bovenstaande velden in een Dynamic Content Wrapper blok gezet wordt, verschijnt er in de rechter kolom de volgende optie:
Vink deze optie aan om aan te geven dat de content van het originele blok vervangen moet worden door content uit Marketing Cloud. Als er geen dynamische content opgehaald kan worden uit Marketing Cloud zal de originele content intact blijven.
If a connection with Marketing Cloud has been set up, it is also possible to place Dynamic Content from a Marketing Cloud Page on a page in the website. This is done using a wrapper block called Dynamic Content Wrapper.
This block has different settings in the right column:
Code type
Dynamic content must always be retrieved based on a campaign code. This value can be sent to Marketing Cloud in several ways:
Page field
The code will be retrieved from the Campaign Code field below the block CampaignSuite page settings
Custom
The code can be entered manually on the Dynamic Content Wrapper block.
Make campaign code dynamic
It is also possible to extract the code from the URL of the page. Check this option and enter the parameter name from the URL containing the campaign code.
Content type
There are currently 3 content types available for dynamic content:
Form page
This is content that can often be found on a campaign page.
Thank you page
This is content that can be displayed on the thank you page after a donation
Next best action
This is content that can be used for possible next best actions from a donor.
Show advanced settings
Under advanced settings it is possible to set a custom endpoint. This endpoint will then overrule the default endpoint in CampaignSuite settings.
It is also possible to choose whether this dynamic block should be rendered Client side or Server side.
Client side
By default, the texts are and images loaded into a Dynamic Content Wrapper via javascript. To ensure that the visitor does not see a jump in the content, the entire content of the page will first be hidden. As soon as all dynamic content has been loaded, the page will become visible.
Server side
With this option, the server will first make a call to Marketing Cloud to fetch the dynamic content. Then all content will be replaced in the blocks. Eventually the complete page will be loaded.
The main difference between Server and Client side is the fact that with Server side the page ‘keeps loading’ until all content has been replaced. At the Client side, the page has finished loading and the visitor will see a white page for a short time (maximum 1 second). Also, cache plugins can prevent Server side pages from being populated dynamically.
The following Gutenberg blocks within a wrapper can contain dynamic content:
– Header
– Paragraph
– Image
– Cover image
– Button
As soon as one of the above fields is placed in a Dynamic Content Wrapper block, the following option appears in the right column:
Check this option to specify that the content of the original block should be replaced with content from Marketing Cloud. If no dynamic content can be retrieved from Marketing Cloud, the original content will remain intact.
Zodra er een event type is gekozen en er één of meerdere aanbieders zijn geselecteerd, verschijnt er per aanbieder een blok met opties om velden te mappen. Feitelijk ga je hier instellen welke paramaters welke waarden moeten hebben in de Client Side of Server Side call.
Elk blok bevat een keuze om de call Client Side of Server Side te laten plaatsen. Is één van deze opties niet zichtbaar, dan wordt deze niet ondersteunt door de aanbieder in combinatie met het gekozen event.
Client Side
Hierbij wordt scriptcode uitgevoerd in de browser van de bezoeker. Dit is in het geval van CampaignSuite altijd een Javascript code.
Server Side
Hierbij wordt scriptcode uitgevoerd op de server. Dit heeft als voordeel dat Server Side calls ook uitgevoerd kunnen worden als de bezoeker al lang niet meer op de website is zoals bij succesvolle betalingen. Deze worden dan ‘onder water’ op de server uitgevoerd.
Daarnaast heeft elk blok de mogelijkheid om parameters te mappen. De linkerkolom toont de beschikbaar parameter waardes (dat kan per aanbieder verschillen) en de rechterkolom toont alle beschikbare formuliervelden en diverse andere waarden die gebruikt kunnen worden.
Beide kolommen hebben de mogelijkheid om een open invulveld te tonen. In dit veld kan je een eigen waarde opgeven in plaats van de waarde uit één van de aangegeven opties.
In de linkerkolom is dat de laatste optie in de dropdown genaamd Add Custom Key en in de rechterkolom is dat de laatste optie in de dropdown genaamd Add Custom Value.
In sommige gevallen moet er gebruik worden gemaakt van arrays (verzamelingen) in bijvoorbeeld Client Side calls. Onderstaande afbeelding toont een voorbeeld van een dergelijke verzameling:
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'test_event',
'transactionProducts': [
{
'sku': 'DD44',
'name': 'T-Shirt',
'price': 11.99
},
{
'sku': 'AA1243544',
'name': 'Socks'
'price': 9.99
}
]
});
</script>
Hier is duidelijk te zien dat transactionProducts een verzameling is van producten. Door het koppelen van keys met een punt kan dit gedaan worden. Dat ziet er dan als volgt uit in de mapping van een meting:
As soon as an event type has been chosen and one or more providers have been selected, a block will appear for each provider with options to map fields. In fact, here you are going to set which parameters should have which values in the Client Side or Server Side call.
Each block contains an option to place the call Client Side or Server Side. If one of these options is not visible, it is not supported by the provider in combination with the selected event.
Client Side
It executes script code in the visitor’s browser. In the case of CampaignSuite, this is always a Javascript code.
Server Side
Executes script code on the server. This has the advantage that Server Side calls can also be performed if the visitor has not been on the website for a long time, such as with successful payments. These are then executed ‘under water’ on the server.
In addition, each block has the ability to map parameters. The left column shows the available parameter values (this can vary per provider) and the right column shows all available form fields and various other values that can be used.
Both columns have the option of showing an open input field. In this field you can enter your own value instead of the value from one of the indicated options.
In the left column this is the last option in the dropdown called Add Custom Key and in the right column it is the last option in the dropdown called Add Custom Value.
In some cases, arrays (collections) must be used in, for example, Client Side calls. The image below shows an example of such a collection:
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'test_event',
'transactionProducts': [
{
'sku': 'DD44',
'name': 'T-Shirt',
'price': 11.99
},
{
'sku': 'AA1243544',
'name': 'Socks'
'price': 9.99
}
]
});
</script>
It is clear here that transactionProducts is a collection of products. This can be done by linking keys with a period. It then looks like this in the mapping of a measurement:
The provider Facebook gives you the ability to only make Server Side API calls to the Facebook Conversion API. This can be done at any of the six available event moments. Click here to get more information about the Facebook Conversion API.
To use the Facebook provider in Measurements you must have entered a Pixel ID and an Access token in the CampaignSuite settings. Without these two values it is not possible to use this provider. More information about setting up a Pixel can be found at this page.
The Facebook Conversion API works on the basis of events. CampaignSuite will create a JSON based on the mapping made in the Feed action, which will be sent via a POST request to Facebook’s API. See the example below of the mapping in CampaignSuite and the JSON sent to Facebook.
{
"data": [
{
"event_name": "Purchase",
"event_time" "1666081911",
"event_id": "1_346",
"event_source_url": "https://www.examplewebsite.nl/doneer",
"action_source": "site",
"user_data": {
"client_ip_address": "1.1.1.1",
"client_user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko)",
"em": "309a0a5c3e211326ae75ca18196d301a9bdbd1a882a4d2569511033da23f0abd",
"fn": "254aa248acb47dd654ca3ea53f48c2c26d641d23d7e2e93a1ec56258df7674c4",
"ln": "eeacc9d4cf711ce63f7d247062f52ca2fe4be1a1a8aef231fe23e75e7bdca60c",
"ph": "191d48a770670b9ae8f59dbb16c64c583f92d1922a2a440b26e36bf6e3970bf0"
},
"custom_data": {
"value": 100.2,
"currency": "EUR",
"form_id": "1",
"entry_id": "346"
}
}
]
}
In addition to the predefined parameters, it is also possible to send parameters yourself. Click here for a list of the available parameters for Facebook.
For example, to add a city field to user_data you must enter as key value: data.user_data.ct. This will then automatically in the JSON.
In the example above, the phone number field custom has been added.
De aanbieder Facebook geeft je de mogelijkheid om alleen Server Side API calls uit te voeren naar de Facebook Conversion API. Dit kan op elk van de zes beschikbare event momenten. Klik hier om meer informatie te verkrijgen over de Facebook Conversion API.
Om gebruik te maken van de Facebook aanbieder in Metingen moet je een Pixel ID en een Access token hebben ingevoerd in de CampaignSuite instellingen. Zonder deze twee waarden is het niet mogelijk om deze aanbieder te gebruiken. Meer informatie over het instellen van een Pixel kan je vinden op deze pagina.
De Facebook Conversion API werkt op basis van events. CampaignSuite zal op basis van de mapping die is gemaakt in de Feed actie een JSON maken die via een POST request verstuurd wordt naar de API van Facebook. Zie het voorbeeld hieronder van de mapping in CampaignSuite en de JSON die verstuurd wordt naar Facebook.
{
"data": [
{
"event_name": "Purchase",
"event_time" "1666081911",
"event_id": "1_346",
"event_source_url": "https://www.voorbeeldwebsite.nl/doneer",
"action_source": "website",
"user_data": {
"client_ip_address": "1.1.1.1",
"client_user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko)",
"em": "309a0a5c3e211326ae75ca18196d301a9bdbd1a882a4d2569511033da23f0abd",
"fn": "254aa248acb47dd654ca3ea53f48c2c26d641d23d7e2e93a1ec56258df7674c4",
"ln": "eeacc9d4cf711ce63f7d247062f52ca2fe4be1a1a8aef231fe23e75e7bdca60c",
"ph": "191d48a770670b9ae8f59dbb16c64c583f92d1922a2a440b26e36bf6e3970bf0"
},
"custom_data": {
"value": 100.2,
"currency": "EUR",
"form_id": "1",
"entry_id": "346"
}
}
]
}
Naast de voorgedefinieerde parameters is het ook mogelijk om zelf parameters mee te sturen. Klik hier voor een lijst met de beschikbare parameters voor Facebook.
Om bijvoorbeeld een woonplaats veld toe te voegen aan user_data moet je als key waarde invullen: data.user_data.ct. Dit zal dan automatisch in de JSON gezet worden.
In het bovenstaande voorbeeld is het telefoonnummer veld custom toegevoegd.
Met de aanbieder Google Analytics 4 (GA4) is het mogelijk om Client Side en Server Side calls uit te voeren. Dit kan voor alle zes de verschillende event types. Alleen bij de event types Na een webhook call van Findock v2 en Na een succesvolle betaling kan een Server Side call uitgevoerd worden en niet Client Side.
Wij adviseren gebruik te maken van de Client Side calls in GA4 als je niet beschikt over Google Tag Manager. Wanneer je namelijk gebruik maakt van de Client Side call voert CampaignSuite javascript functies uit door middel van gtag(); Hierbij is het wel noodzakelijk dat Google Tag geïnstalleerd is op de website:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID');
</script>
Vervang in de bovenstaande code GA_TRACKING_ID door jouw eigen tracking ID van Google Analytics.
Als CampaignSuite een Client Side GA4 call uitvoert zal er een javascript code aangeroepen worden in de browser van de bezoeker.
Lees hier meer over de code die wij hier voor gebruiken. De calls naar GA4 maken gebruiken van events. Een voorbeeld van een simpele pagina wisseling in Gravity Forms kan er als volgt uit zien:
<script type="text/javascript">
if (window.gtag == undefined) {
window.gtag = function () {
window.dataLayer = window.dataLayer || [];
dataLayer.push(arguments);
};
}
gtag('event', 'page_switch', {
'form_page': 1,
'form_id': 4
});
</script>
Bovenstaande code maakt gebruik van de Javascript function gtag().
Technisch is het mogelijk om voor alle zes de event types een Server Side call te laten uitvoeren naar GA4. Dit is alleen beschikbaar als er een Measurement ID en een API secret zijn ingevuld bij de instellingen van CampaignSuite. Deze zijn te vinden in het admin gedeelte van jouw Google Analytics account -> Account Settings -> Data Streams. Klik op de stream en kopieer hier het Measurement ID. De waarde van de API secret kan gevonden worden onder het kopje Measurement Protocol API secrets.
De Server Side call van GA4 maken gebruik van de Measurement Protocol API van Google. Ook deze API werkt op basis van het versturen van events via een POST request naar een endpoint (https://www.google-analytics.com/mp/collect).
Onderstaande afbeeldingen tonen een voorbeeld van een GA4 Server Side call bij een succesvolle betaling in CampaignSuite:
{
"client_id": "278327074.1665398324",
"non_personalized_ads": false,
"events": [
{
"name": "purchase",
"params": {
"items": [
{
"item_id": "Ideal",
"item_name": "One-time",
"quantity": 1,
"item_category": "donaties",
"price": 25
}
],
"currency": "EUR",
"transaction_id": "346",
"value": 25
}
}
]
}
Google heeft een handige tool waarmee je een event kunt bouwen om te testen of het een valide call is. Deze is te vinden op: https://ga-dev-tools.web.app/ga4/event-builder/
With the provider Google Analytics 4 (GA4) it is possible to perform Client Side and Server Side calls. This is possible for all six different event types. Only with the event types After a webhook call from Findock v2 and After a successful payment a Server Side call can be performed and not Client Side.
We recommend using the Client Side calls in GA4 if you don’t have Google Tag Manager. When you use the Client Side call, CampaignSuite executes javascript functions by means of gtag(); This requires that Google Tag is installed on the website:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', newDate());
gtag('config', 'GA_TRACKING_ID');
</script>
In the above code, replace GA_TRACKING_ID with your own tracking ID from Google Analytics.
When CampaignSuite executes a Client Side GA4 call, a javascript code will be executed in the visitor’s browser.
Read here more about the code we use for this. The calls to GA4 use events. An example of a simple page change in Gravity Forms might look like this:
<script type="text/javascript">
if (window.gtag == undefined) {
window.gtag = function() {
window.dataLayer = window.dataLayer || [];
dataLayer.push(arguments);
};
}
gtag('event', 'page_switch', {
'form_page': 1,
'form_id': 4
});
</script>
The above code uses the Javascript function gtag().
Technically it is possible to have a Server Side call made to GA4 for all six event types. This is only available if a Measurement ID and an API secret are entered in the CampaignSuite settings. These can be found in the admin section of your Google Analytics account -> Account Settings -> Data Streams. Click on the stream and copy the Measurement ID here. The value of the API secret can be found under the heading Measurement Protocol API secrets.
GA4’s Server Side calls use the Measurement Protocol API from Google. This API also works on the basis of sending events via a POST request to an endpoint (https://www.google-analytics.com/mp/collect).
The images below show an example of a GA4 Server Side call upon a successful payment in CampaignSuite:
{
"client_id": "278327074.1665398324",
"non_personalized_ads": false,
"events": [
{
"name": "purchase",
"params": {
"items":
[
{
"item_id": "Ideal",
"item_name": "One time",
"quantity": 1,
"item_category": "donations",
"price": 25
}
],
"currency": "EUR",
"transaction_id": "346",
"value": 25
}
}
]
}
Google has a handy tool with which you can build an event to test whether it is a valid call. It can be found at: https://ga- dev-tools.web.app/ga4/event-builder/
Met Squeezely maak je out-of-the-box de meest geavanceerde buyer journeys en personalisatie toepassingen. Je werkt op basis van loepzuivere data en kan alles helemaal naar eigen inzicht inrichten. Deze tool maakt gebruik van zowel een tracking pixel op jouw website of kan events inschieten via hun API. Deze mogelijkheid biedt CampaignSuite in Metingen. Squeezely werkt op basis van events. Elke meting die je instelt in CampaignSuite moet een event zijn.
Om gebruik te maken van de Server Side calls via de Squeezely aanbieder moet je een Account ID en een API-sleutel invullen in de CampaignSuite instellingen. De Client Side calls van Squeezely werken met een datalayer.push() en zullen alleen werken als de Squeezely pixel op de website is geïnstalleerd:
<script type="text/javascript">
(function(s,q,z,l,y){s._sqzl=s._sqzl||[];l=q.createElement('script'),
y=q.getElementsByTagName('script')[0];l.async=1;l.type='text/javascript';
l.defer=true;l.src=z;y.parentNode.insertBefore(l,y)})
(window,document,'https://squeezely.tech/tracker/<YOUR_IDENTIFIER>/sqzl.js');
</script>
Meer informatie over het gebruik van de API is te vinden op de documentatie pagina van Squeezely.
Onderstaande afbeelding toont een simpel voorbeeld van een pagina switch in een Gravity Forms formulier:
<script type="text/javascript">
window._sqzl = window._sqzl || [];
window._sqzl.push({
"event" : "page_switch",
"page" : 1
});
</script>
Omdat de Squeezely pixel is ingeladen in de website zal dit event worden afgevangen in Squeezely.
Server Side calls kunnen worden ingesteld in alle zes de metingen momenten. Het is bij Server Side calls echter wel verplicht om een unieke identifier mee te sturen in de paramaters anders weet Squeezely niet aan wie de data gekoppeld moet worden in hun systeem.
Onderstaande afbeelding toont een Server Side call na een succesvolle donatie. Deze call wordt ‘onder water’ naar Squeezely gestuurd op het moment dat een betaling succesvol is afgerond.
[
"events" => [
[
"event" => "Purchase",
"email" => "test@test.nl",
"firstname" => "Test",
"lastname" => "van Test,
"orderid" => 346,
"products" => [
[
"id" => "single",
"name" => "One-time",
"price" => 25,
"quantity" => 1
]
]
]
]
];
Squeezely heeft een tool waarmee je kunt controleren of Server Side API calls goed binnen komen. Deze is te vinden op: https://app.squeezely.tech/data/events.
With Squeezely you can create the most advanced buyer journeys and personalization applications out-of-the-box. You work on the basis of flawless data and can arrange everything entirely according to your own insight. This tool uses both a tracking pixel on your website or can shoot events via their API. CampaignSuite offers this option in Measurements. Squeezely works on the basis of events. Every measure you set in CampaignSuite must be an event.
To use the Server Side calls via the Squeezely provider you must enter an Account ID and an API key in the CampaignSuite settings. Squeezely’s Client Side calls work with a datalayer.push() and will only work if the Squeezely pixel is installed on the website:
<script type="text/javascript">
(function(s,q,z,l,y){s._sqzl=s._sqzl||[];l=q.createElement('script'),
y=q.getElementsByTagName('script')[0];l.async=1;l.type='text/javascript';
l.defer=true;l.src=z;y.parentNode.insertBefore(l,y)})
(window,document,'https://squeezely.tech/tracker/<YOUR_IDENTIFIER>/sqzl.js');
</script>
More information on how to use the API can be found on the Squeezely documentation page.
The image below shows a simple example of a page switch in a Gravity Forms form:
<script type="text/javascript">
window._sqzl = window._sqzl || [];
window._sqzl.push({
"event" : "page_switch",
"page" : 1
});
</script>
Because the Squeezely pixel is loaded into the website, this event will be captured in Squeezely.
Server Side calls can be set in all six measurement moments. However, with Server Side calls it is mandatory to send a unique identifier in the parameters, otherwise Squeezely will not know to whom the data should be linked in their system.
The image below shows a Server Side call after a successful donation. This call is sent ‘underwater’ to Squeezely when a payment is successfully completed.
[
"events" => [
[
"event" => "Purchase",
"email" => "test@test.nl",
"firstname" => "Test",
"lastname" => "Test,
"orderid" => 346,
"products" => [
[
"id" => "single",
"name" => "One time",
"price" => 25,
"quantity" => 1
]
]
]
]
];
Squeezely has a tool that allows you to check whether Server Side API calls are coming in properly. It can be found at: https://app.squeezely.tech/data/events.
Als er een verbinding met Marketing Cloud is opgezet is het ook mogelijk om Dynamische Content uit een Marketing Cloud Page op een pagina te zetten in de website. Dit gaat aan de hand van een wrapper blok genaamd Dynamic Content Wrapper.
Dit blok heeft verschillenden instellingen in de rechterkolom:
Code type
Dynamische content moet altijd opgehaald worden o.b.v. een campagne code. Deze waarde kan op verschillende manieren meegestuurd worden naar Marketing Cloud:
Pagina veld
De code zal worden opgehaald uit het veld Campagne Code onder het blok CampaignSuite instellingen van de pagina
Custom
De code kan handmatig ingevuld worden op het Dynamic Content Wrapper blok.
Maak campagne code dynamisch
Het is ook mogelijk om de code uit de URL van de pagina te halen. Vink daarvoor deze optie aan en vul de parameter naam in uit de URL waar de campagne code in staat.
Content type
Er zijn momenteel 3 content types beschikbaar voor dynamisch content:
Formulier pagina
Dit is content wat vaak te vinden is op een campagne pagina.
Bedankpagina
Dit is content wat getoond kan worden op de bedankpagina na een donatie
Next best action
Dit is content wat gebruikt kan worden voor mogelijke next best actions van een donateur.
Toon geavanceerde instellingen
Onder geavanceerde instellingen is het mogelijk om een custom endpoint in te stellen. Dit endpoint zal dan het default ingesteld endpoint bij CampaignSuite instellingen overrulen.
Tevens kan er gekozen worden of dit dynamische blok Client side of Server side gerenderd moet worden.
Client side
Standaard worden de teksten en afbeeldingen in een Dynamic Content Wrapper via javascript ingeladen. Om er voor te zorgen dat de bezoeker niet een verspringen van de content ziet, zal de volledige inhoud van de pagina eerst verborgen worden. Zodra alle dynamisch content is geladen zal de pagina zichtbaar worden.
Server side
Bij deze optie zal de server eerst een call doen naar Marketing Cloud om de dynamische content op te halen. Vervolgens zal alle content worden vervangen in de blokken. Uiteindelijk zal de complete pagina geladen worden.
Het grootste verschil tussen Server en Client side is het feit dat bij Server side de pagina ‘blijft laden’ totdat alle content is vervangen. Bij Client side is de pagina klaar met laden en zal de bezoeker nog een korte tijd (maximaal 1 seconde) een witte pagina zien. Tevens kunnen cache plugins er voor zorgen dat Server side pagina’s niet dynamisch gevuld kunnen worden.
De volgende Gutenberg blokken binnen een wrapper kunnen dynamische content bevatten:
– Header
– Paragraaf
– Afbeelding
– Cover afbeelding
– Button
Zodra één van de bovenstaande velden in een Dynamic Content Wrapper blok gezet wordt, verschijnt er in de rechter kolom de volgende optie:
Vink deze optie aan om aan te geven dat de content van het originele blok vervangen moet worden door content uit Marketing Cloud. Als er geen dynamische content opgehaald kan worden uit Marketing Cloud zal de originele content intact blijven.
If a connection with Marketing Cloud has been set up, it is also possible to place Dynamic Content from a Marketing Cloud Page on a page in the website. This is done using a wrapper block called Dynamic Content Wrapper.
This block has different settings in the right column:
Code type
Dynamic content must always be retrieved based on a campaign code. This value can be sent to Marketing Cloud in several ways:
Page field
The code will be retrieved from the Campaign Code field below the block CampaignSuite page settings
Custom
The code can be entered manually on the Dynamic Content Wrapper block.
Make campaign code dynamic
It is also possible to extract the code from the URL of the page. Check this option and enter the parameter name from the URL containing the campaign code.
Content type
There are currently 3 content types available for dynamic content:
Form page
This is content that can often be found on a campaign page.
Thank you page
This is content that can be displayed on the thank you page after a donation
Next best action
This is content that can be used for possible next best actions from a donor.
Show advanced settings
Under advanced settings it is possible to set a custom endpoint. This endpoint will then overrule the default endpoint in CampaignSuite settings.
It is also possible to choose whether this dynamic block should be rendered Client side or Server side.
Client side
By default, the texts are and images loaded into a Dynamic Content Wrapper via javascript. To ensure that the visitor does not see a jump in the content, the entire content of the page will first be hidden. As soon as all dynamic content has been loaded, the page will become visible.
Server side
With this option, the server will first make a call to Marketing Cloud to fetch the dynamic content. Then all content will be replaced in the blocks. Eventually the complete page will be loaded.
The main difference between Server and Client side is the fact that with Server side the page ‘keeps loading’ until all content has been replaced. At the Client side, the page has finished loading and the visitor will see a white page for a short time (maximum 1 second). Also, cache plugins can prevent Server side pages from being populated dynamically.
The following Gutenberg blocks within a wrapper can contain dynamic content:
– Header
– Paragraph
– Image
– Cover image
– Button
As soon as one of the above fields is placed in a Dynamic Content Wrapper block, the following option appears in the right column:
Check this option to specify that the content of the original block should be replaced with content from Marketing Cloud. If no dynamic content can be retrieved from Marketing Cloud, the original content will remain intact.
Google Tag Manager (GTM) is een tool van Google waarmee je als online marketeer, ondernemer of social media specialist minder afhankelijk wordt van je developers of een extern bureau. Door middel van Google Tag Manager zorg je er namelijk voor dat je handige tags zoals Google Analytics of de Meta Pixel kan laten werken zonder dat je je webbouwer moet vragen om de tags in de code van je website te plaatsen.
In Metingen heb je de mogelijkheid om Client Side en Server Side calls uit te voeren voor GTM. Client Side calls zijn niet beschikbaar voor de events Na een webhook call van Findock v2 en Na een succesvolle betaling. De Client Side calls maken gebruik van de datalayer.push() functie. De data kan vervolgens worden uitgelezen door de GTM pixel op jouw website:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','UNIQUE_ID');</script>
<!-- End Google Tag Manager -->
Vervang in de bovenstaande code UNIQUE_ID door jouw eigen Google Tag Manager ID.
Server Side calls zijn alleen beschikbaar als in de CampaignSuite instellingen een waarde is ingevuld bij het veld GTM SST URL (Google Tag Manager Serder Side Tracking URL). Deze URL (ook wel Tag Manager server container genoemd) is aan te maken in Google Tag Manager. Lees hier meer informatie over hoe je een Tag Manager server container kunt aanmaken. Wanneer je het veld Measurement ID invult met het ID uit GTM zal deze automatisch meegestuurd worden in de Server Side calls in de parameter tid.
Wanneer er een Client Side call wordt uitgevoerd via de Google Tag Manager aanbieder detecteert CampaignSuite automatisch of het om een E-commerce Measurement call gaat of niet. Dit doen wij o.b.v. de mapping van de paramater Prijs van het product. Als deze paramater gemapped is, zal de datalayer.push() een e-commerce syntax hebben. In alle andere gevallen zal het een simpele versie van een datalayer.push() zijn. Hieronder 2 voorbeelden van een simpele en een e-commerce Client Side call.
<script type='text/javascript'>
dataLayer.push({
event: "page_switch",
page: "1"
});
</script>
<script type='text/javascript'>
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: "purchase",
transaction_id: "349",
ecommerce: {
value: 12.45,
payment_type: "Ideal",
items: [
{
item_id: "1",
item_name: "Donatie",
price: 12.45,
quantity: 1
}
]
}
});
</script>
Het is alleen mogelijk om Server Side calls te maken als er een Tag Manager server container is aangemaakt en ingesteld. Deze container is middels een aparte URL te benaderen (bijvoorbeeld: https://sst.testwebsite.nl/g/collect) welke ingesteld moet worden bij de CampaignSuite instellingen onder GTM SST URL.
De paramaters die gemapped zijn in het blok van Google Tag Manager bij Metingen zullen meegestuurd worden in de URL die CampaignSuite aanroept via een GET request. Bekijk deze pagina om te zien welke parameters ondersteunt worden.
Onderstaand voorbeeld toont een Server Side call bij een succesvolle betaling:
https://sst.testwebsite.nl/g/collect?v=2&cid=278327074.1665398324&tid=G-AB1CDEFG23&en=payment&cu=EUR&ep.fbc=undefined&ep.transaction_id=346&epn.value=100&ep.typedonatie=One-time&ep.email=test@test.nl&pr1=idonce_0~nmdonatie_via_website~pr100~qt1~caIdeal
Alle product velden worden samengevoegd en alle losse parameters worden achter de URL geplakt. Op deze manier vindt er een Server Side call plaatst voor Google Tag Manager.
Google Tag Manager (GTM) is a tool from Google that allows you as an online marketer, entrepreneur or social media specialist to become less dependent on your developers or an external agency. By means of Google Tag Manager you ensure that you can make useful tags such as Google Analytics or the Meta Pixel work without having to ask your web builder to place the tags in the code of your website.
In Measurements you have the option to make Client Side and Server Side calls for GTM. Client Side calls are not available for the events After a webhook call from Findock v2 and After a successful payment. The Client Side calls use the datalayer.push() function. The data can then be read by the GTM pixel on your website:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({' gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','UNIQUE_ID');</script>
<!-- End Google Tag Manager -->
In the above code, replace UNIQUE_ID with your own Google Tag Manager ID.
Server Side calls are only available if a value is entered in the CampaignSuite settings for the field GTM SST URL (Google Tag Manager Server Side Tracking URL). This URL (also called Tag Manager server container) can be created in Google Tag Manager. Read here to learn more about how to create a Tag Manager server container. When you fill in the Measurement ID field with the ID from GTM, it will automatically be included in the Server Side calls in the parameter tid.
When a Client Side call is made via the Google Tag Manager provider, CampaignSuite automatically detects whether it is an E-commerce Measurement call or not. We do this based on the mapping of the Price parameter of the product. If this parameter is mapped, the datalayer.push() will have an e-commerce syntax. In all other cases it will be a simple version of a datalayer.push(). Below are 2 examples of a simple and an e-commerce Client Side call.
<script type='text/javascript'>
dataLayer.push({
event: "page_switch",
page: "1"
});
</script>
<script type='text/javascript'>
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: "purchase",
transaction_id: "349",
e-commerce: {
value: 12.45,
payment_type: "Ideal",
items: [
{
item_id: "1",
item_name: "Donation",
price: 12.45,
quantity: 1
}
]
}
});
</script>
It is only possible to make Server Side calls if there is a Tag Managa server container has been created and set up. This container can be accessed via a separate URL (for example: https://sst.testwebsite.nl/g/collect) which must be set in the CampaignSuite settings under GTM SST URL.
The parameters mapped in the block of Google Tag Manager at Measurements will be sent in the URL that CampaignSuite calls via a GET request. Check out this page to see which parameters are supported .
The example below shows a Server Side call upon successful payment:
https://sst.testwebsite.nl/g/collect?v=2&cid=278327074.1665398324&tid=G-AB1CDEFG23& en=payment&cu=EUR&ep.fbc=undefined&ep.transaction_id=346&epn.value=100&ep.typedonatie=One-time&ep.email=test@test.nl&pr1=idonce_0~nmdonatie_via_website~ pr100~qt1~caIdeal
All product fields are merged and all individual parameters are pasted after the URL. In this way a Server Side call is made for Google Tag Manager.
CampaignSuite bevat een zeer uitgebreid systeem om metingen bij formulieren in te stellen. Denk hierbij aan bijvoorbeeld Client Side en Server Side events op bepaalde momenten in een formulier. Deze momenten kunnen bijvoorbeeld zijn wanneer je van pagina wisselt in een formulier of als er een succesvolle betaling heeft plaatsgevonden.
Er zijn in totaal 6 momenten waarop je kunt bepalen dat er iets gemeten moet worden door één van de vier aanbieders (Facebook, Google Analytics 4, Squeezely of Google Tag Manager). Het is mogelijk om meerdere acties aan te maken per formulier.
Bekijk onderstaande artikelen om meer informatie te verkrijgen over de opties van metingen.
Om een nieuw meet moment aan te maken open je een formulier in WordPress en ga je naar Instellingen -> Metingen. Klik vervolgens op de knop Nieuwe toevoegen.
Dit opent een nieuw venster met de volgende opties:
Actie naam
Vul hier een herkenbare naam in binnen het systeem. Deze naam zal niet getoond worden op de website of in een waarde van een meting.
Type event
Kies hier uit één van de zes momenten waarop de meting moet plaatsvinden. Elk moment kan een Client Side call, een Server Side call of beiden uitvoeren. De momenten waaruit je kunt kiezen zijn:
Aanbieders
Kies hier welke aanbieders je iets wilt laten meten op het aangegeven moment. De opties hier zijn:
Feed voorwaarde
Het is tevens mogelijk om deze Feed actie conditioneel te maken. Dat houdt in dat de feed alleen zal worden uitgevoerd als er aan bepaalde condities wordt voldaan.
Als alle instellingen zijn gedaan klik je op Refresh om de mapping te tonen van de gekozen aanbieders. Deze mapping is nodig om het systeem te laten weten welke data waar te vinden is in het formulier. Kijk verder bij het artikel Mapping om te ontdekken welke mogelijkheden er zijn.
Zodra er een event type is gekozen en er één of meerdere aanbieders zijn geselecteerd, verschijnt er per aanbieder een blok met opties om velden te mappen. Feitelijk ga je hier instellen welke paramaters welke waarden moeten hebben in de Client Side of Server Side call.
Elk blok bevat een keuze om de call Client Side of Server Side te laten plaatsen. Is één van deze opties niet zichtbaar, dan wordt deze niet ondersteunt door de aanbieder in combinatie met het gekozen event.
Client Side
Hierbij wordt scriptcode uitgevoerd in de browser van de bezoeker. Dit is in het geval van CampaignSuite altijd een Javascript code.
Server Side
Hierbij wordt scriptcode uitgevoerd op de server. Dit heeft als voordeel dat Server Side calls ook uitgevoerd kunnen worden als de bezoeker al lang niet meer op de website is zoals bij succesvolle betalingen. Deze worden dan ‘onder water’ op de server uitgevoerd.
Daarnaast heeft elk blok de mogelijkheid om parameters te mappen. De linkerkolom toont de beschikbaar parameter waardes (dat kan per aanbieder verschillen) en de rechterkolom toont alle beschikbare formuliervelden en diverse andere waarden die gebruikt kunnen worden.
Beide kolommen hebben de mogelijkheid om een open invulveld te tonen. In dit veld kan je een eigen waarde opgeven in plaats van de waarde uit één van de aangegeven opties.
In de linkerkolom is dat de laatste optie in de dropdown genaamd Add Custom Key en in de rechterkolom is dat de laatste optie in de dropdown genaamd Add Custom Value.
In sommige gevallen moet er gebruik worden gemaakt van arrays (verzamelingen) in bijvoorbeeld Client Side calls. Onderstaande afbeelding toont een voorbeeld van een dergelijke verzameling:
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'test_event',
'transactionProducts': [
{
'sku': 'DD44',
'name': 'T-Shirt',
'price': 11.99
},
{
'sku': 'AA1243544',
'name': 'Socks'
'price': 9.99
}
]
});
</script>
Hier is duidelijk te zien dat transactionProducts een verzameling is van producten. Door het koppelen van keys met een punt kan dit gedaan worden. Dat ziet er dan als volgt uit in de mapping van een meting:
De aanbieder Facebook geeft je de mogelijkheid om alleen Server Side API calls uit te voeren naar de Facebook Conversion API. Dit kan op elk van de zes beschikbare event momenten. Klik hier om meer informatie te verkrijgen over de Facebook Conversion API.
Om gebruik te maken van de Facebook aanbieder in Metingen moet je een Pixel ID en een Access token hebben ingevoerd in de CampaignSuite instellingen. Zonder deze twee waarden is het niet mogelijk om deze aanbieder te gebruiken. Meer informatie over het instellen van een Pixel kan je vinden op deze pagina.
De Facebook Conversion API werkt op basis van events. CampaignSuite zal op basis van de mapping die is gemaakt in de Feed actie een JSON maken die via een POST request verstuurd wordt naar de API van Facebook. Zie het voorbeeld hieronder van de mapping in CampaignSuite en de JSON die verstuurd wordt naar Facebook.
{
"data": [
{
"event_name": "Purchase",
"event_time" "1666081911",
"event_id": "1_346",
"event_source_url": "https://www.voorbeeldwebsite.nl/doneer",
"action_source": "website",
"user_data": {
"client_ip_address": "1.1.1.1",
"client_user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko)",
"em": "309a0a5c3e211326ae75ca18196d301a9bdbd1a882a4d2569511033da23f0abd",
"fn": "254aa248acb47dd654ca3ea53f48c2c26d641d23d7e2e93a1ec56258df7674c4",
"ln": "eeacc9d4cf711ce63f7d247062f52ca2fe4be1a1a8aef231fe23e75e7bdca60c",
"ph": "191d48a770670b9ae8f59dbb16c64c583f92d1922a2a440b26e36bf6e3970bf0"
},
"custom_data": {
"value": 100.2,
"currency": "EUR",
"form_id": "1",
"entry_id": "346"
}
}
]
}
Naast de voorgedefinieerde parameters is het ook mogelijk om zelf parameters mee te sturen. Klik hier voor een lijst met de beschikbare parameters voor Facebook.
Om bijvoorbeeld een woonplaats veld toe te voegen aan user_data moet je als key waarde invullen: data.user_data.ct. Dit zal dan automatisch in de JSON gezet worden.
In het bovenstaande voorbeeld is het telefoonnummer veld custom toegevoegd.
Met de aanbieder Google Analytics 4 (GA4) is het mogelijk om Client Side en Server Side calls uit te voeren. Dit kan voor alle zes de verschillende event types. Alleen bij de event types Na een webhook call van Findock v2 en Na een succesvolle betaling kan een Server Side call uitgevoerd worden en niet Client Side.
Wij adviseren gebruik te maken van de Client Side calls in GA4 als je niet beschikt over Google Tag Manager. Wanneer je namelijk gebruik maakt van de Client Side call voert CampaignSuite javascript functies uit door middel van gtag(); Hierbij is het wel noodzakelijk dat Google Tag geïnstalleerd is op de website:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID');
</script>
Vervang in de bovenstaande code GA_TRACKING_ID door jouw eigen tracking ID van Google Analytics.
Als CampaignSuite een Client Side GA4 call uitvoert zal er een javascript code aangeroepen worden in de browser van de bezoeker.
Lees hier meer over de code die wij hier voor gebruiken. De calls naar GA4 maken gebruiken van events. Een voorbeeld van een simpele pagina wisseling in Gravity Forms kan er als volgt uit zien:
<script type="text/javascript">
if (window.gtag == undefined) {
window.gtag = function () {
window.dataLayer = window.dataLayer || [];
dataLayer.push(arguments);
};
}
gtag('event', 'page_switch', {
'form_page': 1,
'form_id': 4
});
</script>
Bovenstaande code maakt gebruik van de Javascript function gtag().
Technisch is het mogelijk om voor alle zes de event types een Server Side call te laten uitvoeren naar GA4. Dit is alleen beschikbaar als er een Measurement ID en een API secret zijn ingevuld bij de instellingen van CampaignSuite. Deze zijn te vinden in het admin gedeelte van jouw Google Analytics account -> Account Settings -> Data Streams. Klik op de stream en kopieer hier het Measurement ID. De waarde van de API secret kan gevonden worden onder het kopje Measurement Protocol API secrets.
De Server Side call van GA4 maken gebruik van de Measurement Protocol API van Google. Ook deze API werkt op basis van het versturen van events via een POST request naar een endpoint (https://www.google-analytics.com/mp/collect).
Onderstaande afbeeldingen tonen een voorbeeld van een GA4 Server Side call bij een succesvolle betaling in CampaignSuite:
{
"client_id": "278327074.1665398324",
"non_personalized_ads": false,
"events": [
{
"name": "purchase",
"params": {
"items": [
{
"item_id": "Ideal",
"item_name": "One-time",
"quantity": 1,
"item_category": "donaties",
"price": 25
}
],
"currency": "EUR",
"transaction_id": "346",
"value": 25
}
}
]
}
Google heeft een handige tool waarmee je een event kunt bouwen om te testen of het een valide call is. Deze is te vinden op: https://ga-dev-tools.web.app/ga4/event-builder/
Met Squeezely maak je out-of-the-box de meest geavanceerde buyer journeys en personalisatie toepassingen. Je werkt op basis van loepzuivere data en kan alles helemaal naar eigen inzicht inrichten. Deze tool maakt gebruik van zowel een tracking pixel op jouw website of kan events inschieten via hun API. Deze mogelijkheid biedt CampaignSuite in Metingen. Squeezely werkt op basis van events. Elke meting die je instelt in CampaignSuite moet een event zijn.
Om gebruik te maken van de Server Side calls via de Squeezely aanbieder moet je een Account ID en een API-sleutel invullen in de CampaignSuite instellingen. De Client Side calls van Squeezely werken met een datalayer.push() en zullen alleen werken als de Squeezely pixel op de website is geïnstalleerd:
<script type="text/javascript">
(function(s,q,z,l,y){s._sqzl=s._sqzl||[];l=q.createElement('script'),
y=q.getElementsByTagName('script')[0];l.async=1;l.type='text/javascript';
l.defer=true;l.src=z;y.parentNode.insertBefore(l,y)})
(window,document,'https://squeezely.tech/tracker/<YOUR_IDENTIFIER>/sqzl.js');
</script>
Meer informatie over het gebruik van de API is te vinden op de documentatie pagina van Squeezely.
Onderstaande afbeelding toont een simpel voorbeeld van een pagina switch in een Gravity Forms formulier:
<script type="text/javascript">
window._sqzl = window._sqzl || [];
window._sqzl.push({
"event" : "page_switch",
"page" : 1
});
</script>
Omdat de Squeezely pixel is ingeladen in de website zal dit event worden afgevangen in Squeezely.
Server Side calls kunnen worden ingesteld in alle zes de metingen momenten. Het is bij Server Side calls echter wel verplicht om een unieke identifier mee te sturen in de paramaters anders weet Squeezely niet aan wie de data gekoppeld moet worden in hun systeem.
Onderstaande afbeelding toont een Server Side call na een succesvolle donatie. Deze call wordt ‘onder water’ naar Squeezely gestuurd op het moment dat een betaling succesvol is afgerond.
[
"events" => [
[
"event" => "Purchase",
"email" => "test@test.nl",
"firstname" => "Test",
"lastname" => "van Test,
"orderid" => 346,
"products" => [
[
"id" => "single",
"name" => "One-time",
"price" => 25,
"quantity" => 1
]
]
]
]
];
Squeezely heeft een tool waarmee je kunt controleren of Server Side API calls goed binnen komen. Deze is te vinden op: https://app.squeezely.tech/data/events.
Google Tag Manager (GTM) is een tool van Google waarmee je als online marketeer, ondernemer of social media specialist minder afhankelijk wordt van je developers of een extern bureau. Door middel van Google Tag Manager zorg je er namelijk voor dat je handige tags zoals Google Analytics of de Meta Pixel kan laten werken zonder dat je je webbouwer moet vragen om de tags in de code van je website te plaatsen.
In Metingen heb je de mogelijkheid om Client Side en Server Side calls uit te voeren voor GTM. Client Side calls zijn niet beschikbaar voor de events Na een webhook call van Findock v2 en Na een succesvolle betaling. De Client Side calls maken gebruik van de datalayer.push() functie. De data kan vervolgens worden uitgelezen door de GTM pixel op jouw website:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','UNIQUE_ID');</script>
<!-- End Google Tag Manager -->
Vervang in de bovenstaande code UNIQUE_ID door jouw eigen Google Tag Manager ID.
Server Side calls zijn alleen beschikbaar als in de CampaignSuite instellingen een waarde is ingevuld bij het veld GTM SST URL (Google Tag Manager Serder Side Tracking URL). Deze URL (ook wel Tag Manager server container genoemd) is aan te maken in Google Tag Manager. Lees hier meer informatie over hoe je een Tag Manager server container kunt aanmaken. Wanneer je het veld Measurement ID invult met het ID uit GTM zal deze automatisch meegestuurd worden in de Server Side calls in de parameter tid.
Wanneer er een Client Side call wordt uitgevoerd via de Google Tag Manager aanbieder detecteert CampaignSuite automatisch of het om een E-commerce Measurement call gaat of niet. Dit doen wij o.b.v. de mapping van de paramater Prijs van het product. Als deze paramater gemapped is, zal de datalayer.push() een e-commerce syntax hebben. In alle andere gevallen zal het een simpele versie van een datalayer.push() zijn. Hieronder 2 voorbeelden van een simpele en een e-commerce Client Side call.
<script type='text/javascript'>
dataLayer.push({
event: "page_switch",
page: "1"
});
</script>
<script type='text/javascript'>
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: "purchase",
transaction_id: "349",
ecommerce: {
value: 12.45,
payment_type: "Ideal",
items: [
{
item_id: "1",
item_name: "Donatie",
price: 12.45,
quantity: 1
}
]
}
});
</script>
Het is alleen mogelijk om Server Side calls te maken als er een Tag Manager server container is aangemaakt en ingesteld. Deze container is middels een aparte URL te benaderen (bijvoorbeeld: https://sst.testwebsite.nl/g/collect) welke ingesteld moet worden bij de CampaignSuite instellingen onder GTM SST URL.
De paramaters die gemapped zijn in het blok van Google Tag Manager bij Metingen zullen meegestuurd worden in de URL die CampaignSuite aanroept via een GET request. Bekijk deze pagina om te zien welke parameters ondersteunt worden.
Onderstaand voorbeeld toont een Server Side call bij een succesvolle betaling:
https://sst.testwebsite.nl/g/collect?v=2&cid=278327074.1665398324&tid=G-AB1CDEFG23&en=payment&cu=EUR&ep.fbc=undefined&ep.transaction_id=346&epn.value=100&ep.typedonatie=One-time&ep.email=test@test.nl&pr1=idonce_0~nmdonatie_via_website~pr100~qt1~caIdeal
Alle product velden worden samengevoegd en alle losse parameters worden achter de URL geplakt. Op deze manier vindt er een Server Side call plaatst voor Google Tag Manager.
CampaignSuite contains a very extensive system for setting measurements on forms. Think for example of Client Side and Server Side events at certain moments in a form. These moments can be, for example, when you switch pages in a form or when a successful payment has taken place.
There are a total of 6 moments when you can determine that something needs to be measured by one of the four providers (Facebook, Google Analytics 4, Squeezely or Google Tag Manager). It is possible to create multiple actions per form.
Check out the articles below to learn more about measurement options.
To create a new measurement moment, open a form in WordPress and go to Settings -> Measurements. Then click the Add new button.
This will open a new window with the following options:
Action name
Enter a recognizable name within the system here. This name will not be displayed on the website or in a measurement value.
Type of event
Choose here from one of the six moments at which the measurement should take place. An event can make a Client Side call, a Server Side call, or both. The moments you can choose from are:
Providers
Choose here which providers you want to have something measured on the specified event. The options here are:
Feed condition
It is also possible to make this Feed action conditional. This means that the feed will only be executed if certain conditions are met.
When all settings are done, click on Refresh to display the mapping of the chosen providers. This mapping is necessary to let the system know which data can be found where in the form. Look further at the article Mapping to discover the possibilities.
As soon as an event type has been chosen and one or more providers have been selected, a block will appear for each provider with options to map fields. In fact, here you are going to set which parameters should have which values in the Client Side or Server Side call.
Each block contains an option to place the call Client Side or Server Side. If one of these options is not visible, it is not supported by the provider in combination with the selected event.
Client Side
It executes script code in the visitor’s browser. In the case of CampaignSuite, this is always a Javascript code.
Server Side
Executes script code on the server. This has the advantage that Server Side calls can also be performed if the visitor has not been on the website for a long time, such as with successful payments. These are then executed ‘under water’ on the server.
In addition, each block has the ability to map parameters. The left column shows the available parameter values (this can vary per provider) and the right column shows all available form fields and various other values that can be used.
Both columns have the option of showing an open input field. In this field you can enter your own value instead of the value from one of the indicated options.
In the left column this is the last option in the dropdown called Add Custom Key and in the right column it is the last option in the dropdown called Add Custom Value.
In some cases, arrays (collections) must be used in, for example, Client Side calls. The image below shows an example of such a collection:
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'test_event',
'transactionProducts': [
{
'sku': 'DD44',
'name': 'T-Shirt',
'price': 11.99
},
{
'sku': 'AA1243544',
'name': 'Socks'
'price': 9.99
}
]
});
</script>
It is clear here that transactionProducts is a collection of products. This can be done by linking keys with a period. It then looks like this in the mapping of a measurement:
The provider Facebook gives you the ability to only make Server Side API calls to the Facebook Conversion API. This can be done at any of the six available event moments. Click here to get more information about the Facebook Conversion API.
To use the Facebook provider in Measurements you must have entered a Pixel ID and an Access token in the CampaignSuite settings. Without these two values it is not possible to use this provider. More information about setting up a Pixel can be found at this page.
The Facebook Conversion API works on the basis of events. CampaignSuite will create a JSON based on the mapping made in the Feed action, which will be sent via a POST request to Facebook’s API. See the example below of the mapping in CampaignSuite and the JSON sent to Facebook.
{
"data": [
{
"event_name": "Purchase",
"event_time" "1666081911",
"event_id": "1_346",
"event_source_url": "https://www.examplewebsite.nl/doneer",
"action_source": "site",
"user_data": {
"client_ip_address": "1.1.1.1",
"client_user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko)",
"em": "309a0a5c3e211326ae75ca18196d301a9bdbd1a882a4d2569511033da23f0abd",
"fn": "254aa248acb47dd654ca3ea53f48c2c26d641d23d7e2e93a1ec56258df7674c4",
"ln": "eeacc9d4cf711ce63f7d247062f52ca2fe4be1a1a8aef231fe23e75e7bdca60c",
"ph": "191d48a770670b9ae8f59dbb16c64c583f92d1922a2a440b26e36bf6e3970bf0"
},
"custom_data": {
"value": 100.2,
"currency": "EUR",
"form_id": "1",
"entry_id": "346"
}
}
]
}
In addition to the predefined parameters, it is also possible to send parameters yourself. Click here for a list of the available parameters for Facebook.
For example, to add a city field to user_data you must enter as key value: data.user_data.ct. This will then automatically in the JSON.
In the example above, the phone number field custom has been added.
With the provider Google Analytics 4 (GA4) it is possible to perform Client Side and Server Side calls. This is possible for all six different event types. Only with the event types After a webhook call from Findock v2 and After a successful payment a Server Side call can be performed and not Client Side.
We recommend using the Client Side calls in GA4 if you don’t have Google Tag Manager. When you use the Client Side call, CampaignSuite executes javascript functions by means of gtag(); This requires that Google Tag is installed on the website:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', newDate());
gtag('config', 'GA_TRACKING_ID');
</script>
In the above code, replace GA_TRACKING_ID with your own tracking ID from Google Analytics.
When CampaignSuite executes a Client Side GA4 call, a javascript code will be executed in the visitor’s browser.
Read here more about the code we use for this. The calls to GA4 use events. An example of a simple page change in Gravity Forms might look like this:
<script type="text/javascript">
if (window.gtag == undefined) {
window.gtag = function() {
window.dataLayer = window.dataLayer || [];
dataLayer.push(arguments);
};
}
gtag('event', 'page_switch', {
'form_page': 1,
'form_id': 4
});
</script>
The above code uses the Javascript function gtag().
Technically it is possible to have a Server Side call made to GA4 for all six event types. This is only available if a Measurement ID and an API secret are entered in the CampaignSuite settings. These can be found in the admin section of your Google Analytics account -> Account Settings -> Data Streams. Click on the stream and copy the Measurement ID here. The value of the API secret can be found under the heading Measurement Protocol API secrets.
GA4’s Server Side calls use the Measurement Protocol API from Google. This API also works on the basis of sending events via a POST request to an endpoint (https://www.google-analytics.com/mp/collect).
The images below show an example of a GA4 Server Side call upon a successful payment in CampaignSuite:
{
"client_id": "278327074.1665398324",
"non_personalized_ads": false,
"events": [
{
"name": "purchase",
"params": {
"items":
[
{
"item_id": "Ideal",
"item_name": "One time",
"quantity": 1,
"item_category": "donations",
"price": 25
}
],
"currency": "EUR",
"transaction_id": "346",
"value": 25
}
}
]
}
Google has a handy tool with which you can build an event to test whether it is a valid call. It can be found at: https://ga- dev-tools.web.app/ga4/event-builder/
With Squeezely you can create the most advanced buyer journeys and personalization applications out-of-the-box. You work on the basis of flawless data and can arrange everything entirely according to your own insight. This tool uses both a tracking pixel on your website or can shoot events via their API. CampaignSuite offers this option in Measurements. Squeezely works on the basis of events. Every measure you set in CampaignSuite must be an event.
To use the Server Side calls via the Squeezely provider you must enter an Account ID and an API key in the CampaignSuite settings. Squeezely’s Client Side calls work with a datalayer.push() and will only work if the Squeezely pixel is installed on the website:
<script type="text/javascript">
(function(s,q,z,l,y){s._sqzl=s._sqzl||[];l=q.createElement('script'),
y=q.getElementsByTagName('script')[0];l.async=1;l.type='text/javascript';
l.defer=true;l.src=z;y.parentNode.insertBefore(l,y)})
(window,document,'https://squeezely.tech/tracker/<YOUR_IDENTIFIER>/sqzl.js');
</script>
More information on how to use the API can be found on the Squeezely documentation page.
The image below shows a simple example of a page switch in a Gravity Forms form:
<script type="text/javascript">
window._sqzl = window._sqzl || [];
window._sqzl.push({
"event" : "page_switch",
"page" : 1
});
</script>
Because the Squeezely pixel is loaded into the website, this event will be captured in Squeezely.
Server Side calls can be set in all six measurement moments. However, with Server Side calls it is mandatory to send a unique identifier in the parameters, otherwise Squeezely will not know to whom the data should be linked in their system.
The image below shows a Server Side call after a successful donation. This call is sent ‘underwater’ to Squeezely when a payment is successfully completed.
[
"events" => [
[
"event" => "Purchase",
"email" => "test@test.nl",
"firstname" => "Test",
"lastname" => "Test,
"orderid" => 346,
"products" => [
[
"id" => "single",
"name" => "One time",
"price" => 25,
"quantity" => 1
]
]
]
]
];
Squeezely has a tool that allows you to check whether Server Side API calls are coming in properly. It can be found at: https://app.squeezely.tech/data/events.
Google Tag Manager (GTM) is a tool from Google that allows you as an online marketer, entrepreneur or social media specialist to become less dependent on your developers or an external agency. By means of Google Tag Manager you ensure that you can make useful tags such as Google Analytics or the Meta Pixel work without having to ask your web builder to place the tags in the code of your website.
In Measurements you have the option to make Client Side and Server Side calls for GTM. Client Side calls are not available for the events After a webhook call from Findock v2 and After a successful payment. The Client Side calls use the datalayer.push() function. The data can then be read by the GTM pixel on your website:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({' gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','UNIQUE_ID');</script>
<!-- End Google Tag Manager -->
In the above code, replace UNIQUE_ID with your own Google Tag Manager ID.
Server Side calls are only available if a value is entered in the CampaignSuite settings for the field GTM SST URL (Google Tag Manager Server Side Tracking URL). This URL (also called Tag Manager server container) can be created in Google Tag Manager. Read here to learn more about how to create a Tag Manager server container. When you fill in the Measurement ID field with the ID from GTM, it will automatically be included in the Server Side calls in the parameter tid.
When a Client Side call is made via the Google Tag Manager provider, CampaignSuite automatically detects whether it is an E-commerce Measurement call or not. We do this based on the mapping of the Price parameter of the product. If this parameter is mapped, the datalayer.push() will have an e-commerce syntax. In all other cases it will be a simple version of a datalayer.push(). Below are 2 examples of a simple and an e-commerce Client Side call.
<script type='text/javascript'>
dataLayer.push({
event: "page_switch",
page: "1"
});
</script>
<script type='text/javascript'>
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: "purchase",
transaction_id: "349",
e-commerce: {
value: 12.45,
payment_type: "Ideal",
items: [
{
item_id: "1",
item_name: "Donation",
price: 12.45,
quantity: 1
}
]
}
});
</script>
It is only possible to make Server Side calls if there is a Tag Managa server container has been created and set up. This container can be accessed via a separate URL (for example: https://sst.testwebsite.nl/g/collect) which must be set in the CampaignSuite settings under GTM SST URL.
The parameters mapped in the block of Google Tag Manager at Measurements will be sent in the URL that CampaignSuite calls via a GET request. Check out this page to see which parameters are supported .
The example below shows a Server Side call upon successful payment:
https://sst.testwebsite.nl/g/collect?v=2&cid=278327074.1665398324&tid=G-AB1CDEFG23& en=payment&cu=EUR&ep.fbc=undefined&ep.transaction_id=346&epn.value=100&ep.typedonatie=One-time&ep.email=test@test.nl&pr1=idonce_0~nmdonatie_via_website~ pr100~qt1~caIdeal
All product fields are merged and all individual parameters are pasted after the URL. In this way a Server Side call is made for Google Tag Manager.