API Remarketing en JavaScript pour les développeurs

Home » Remarketing » API Remarketing en JavaScript pour les développeurs

Posté par Florina Coca

Notre API aide les développeurs à réaliser les intégrations rapidement et facilement.

Chargement du code pour le Remarketing NewsMAN

<!-- Newsman Remarketing -->
<script type="text/javascript">
var _nzm = _nzm || [];
var _nzm_config = _nzm_config || [];
(function() {
    if (!_nzm.track) {
        var a, methods, i;
        a = function(f) {
            return function() {
                _nzm.push([f].concat(Array.prototype.slice.call(arguments, 0)));
            }
        };
        methods = ["identify", "track", "run"];
        for(i = 0; i < methods.length; i++) {
            _nzm[methods[i]] = a(methods[i])
        };
        s = document.getElementsByTagName("script")[0];
        var script_dom = document.createElement("script");
        script_dom.async = true;
        script_dom.id    = "nzm-tracker";
        script_dom.setAttribute("data-site-id", "10200-1-000000000000000000000000-5b1fd5a903da5b81321b78e55507c78d");
        script_dom.src = "https://retargeting.newsmanapp.com/js/retargeting/track.js";
        s.parentNode.insertBefore(script_dom, s);
    }
})();
</script>
<!-- End Newsman Remarketing -->

Remplacez ‘10200-1-000000000000000000000000-5b1fd5a903da5b81321b78e55507c78d’ par votre propre ID dans ‘Paramètres’ > ‘Remarketing’ de l’interface d’administration de NewsMAN.

Désactivation du suivi pour un site :

_nzm_config['no_tracking'] = 1;

Désactivation du suivi pour l’utilisateur/navigateur :

_nzm.setTracking(0);

Définissez le cookie sous la forme _nzm_tr_10100-54 avec la valeur 0. Peut être appelé dans la logique d’une bannière de cookies.

Activation du suivi pour l’utilisateur/navigateur :

_nzm.setTracking(1);

Supprimez le cookie sous la forme _nzm_tr_93783-8273. Peut être appelé dans la logique d’une bannière de cookies.

Identification d’un utilisateur/client

_nzm.identify( { email: 'ion@company.com', first_name: 'John', last_name: 'Doe' } );

_nzm.identify( { email: 'ion@company.com'} );

Cela se produit généralement après qu’un utilisateur se connecte à votre application.

Pour des cas spécifiques, le champ email avec la valeur pour l’auto-identification doit être spécifié. Le code est ajouté dans l’interface d’administration NewsMAN, dans la section ‘Paramètres’ > ‘Remarketing’. Il est possible de spécifier uniquement le sélecteur, ou le sélecteur et la page à rechercher.

sélecteur + page

_nzm_config['autoidentify'].push({'url_containing': '/contul-meu', 'email_selector': '#ctl10_UserName'});
_nzm_config['autoidentify'].push({'url_containing': '/cosul-meu/comanda-rapida', 'email_selector': '#ctl10_tbEmail'});

juste le sélecteur (recherche sur toutes les pages).

_nzm_config['autoidentify'].push({'email_selector': '#ctl10_UserName'});
_nzm_config['autoidentify'].push({'email_selector': '#ctl10_tbEmail'});

Activation du suivi pour les utilisateurs non identifiés

_nzm_config['enable_nonidentified'] = 1;

Activation de l’inscription à la newsletter sur les pages d’inscription (register) et de paiement (checkout) d’un site, lors de la sélection de la case à cocher.

_nzm_config['subscribe_checkbox'].push({'url_containing': '/contul-meu', 'checkbox_selector': '#opt-in-newsletter'});
_nzm_config['subscribe_checkbox'].push({'url_containing': '/cosul-meu/comanda-rapida', 'checkbox_selector': '#opt-in-newsletter-2'});

_nzm_config['subscribe_checkbox'].push({'checkbox_selector': '#opt-in-newsletter'});
_nzm_config['subscribe_checkbox'].push({'checkbox_selector': '#opt-in-newsletter-2'});

Vérifiez si un utilisateur/client a été identifié.

_nzm.get_tracking_id();

Configuration d’une variable personnalisée pour un abonné NewsMAN.

_nzm.run( 'user:setProp', { 'skill': 3000 } );

Suivi pour un événement personnalisé, avec ou sans rappel (callback).

function my_callback(param) {
    console.log("This is a callback");
}
_nzm.track('good_luck', { luck_level: 10 }, 'my_callback');
_nzm.track('good_luck', { luck_level: 10 });

Ouverture/fermeture d’une fenêtre modale d’abonnement (si elle existe).

_nzm.run('modal:show');
_nzm.run('modal:hide');

La fenêtre modale peut également être intégrée dans un nœud DOM selon les besoins :

<div class=”show-here-class”>modal</div>

_nzm.run('modal:show', '.show-here-class');

<div id=”show-here-id”>modal</div>

_nzm.run('modal:show', '#show-here-id');
_nzm.run('modal:show', '#show-here-id', 'insert');
_nzm.run('modal:show', '#show-here-id', 'append');
_nzm.run('modal:show', '#show-here-id', 'replace');
_nzm.run('modal:show', '#show-here-id', 'insert_before');
_nzm.run('modal:show', '#show-here-id', 'insert_after');

insert – ajoutez une fenêtre modale dans #show-here-id, avant le contenu.
append – ajoutez une fenêtre modale dans #show-here-id, après le contenu.
replace – ajoutez une fenêtre modale dans #show-here-id, en remplaçant le contenu.
insert_before – ajoutez une fenêtre modale avant #show-here-id.
insert_after – ajoutez une fenêtre modale après #show-here-id

Un certain modal peut être affiché après le form_id.

_nzm.run('modal:show:1c2c635b96eeeb3e8ee4756vc6c889163f2', '#show-here-id', 'insert_before');

Événements

on:scroll
on:scroll.up
on:scroll.down
on:scroll.toTop
on:scroll.toBottom
on:scroll.to25
on:scroll.to50
on:scroll.to75
on:unload
on:seconds-passed

_nzm.run('on:scroll.to50', function () { console.log('Scrolled to mid page') } );
_nzm.run('on:seconds-passed', function () { console.log('It passed 5 seconds after page loaded') }, 5);

Méthode _nzm.run() utilisant un rappel (callback) :

_nzm.run( 'send', 'event', 'UX', 'click', 'add to cart', null, _nzm.createFunctionWithTimeout(function() {
    console.log('Produsul a fost pus in cos')
}));

La méthode doit être utilisée immédiatement après le suivi lors d’une redirection (par exemple : ajout au panier avec redirection vers le panier). Si _nzm.run ne fonctionne pas, le rappel (callback) s’exécute toujours (avec un délai d’attente d’une seconde).

Debugging:

_nzm.debug();

Le module e-commerce

Le module e-commerce est très similaire à Google Enhanced Ecommerce. Ainsi, la manière la plus rapide d’intégrer le Remarketing NewsMAN pour le commerce électronique avec vos applications est de cloner l’intégration Google Enhanced Ecommerce, si vous en avez déjà une, de modifier le script de chargement et de remplacer “ga(” par “_nzm.run(” dans le code.

Les sections suivantes vous montreront comment implémenter et mesurer les activités suivantes :

Chargement du module e-commerce
Devise
Vues des produits
Vues détaillées du produit
Ajout au panier
Suppresion du panier
Achats

Chargement du module e-commerce

_nzm.run( 'require', 'ec' );

Spécification de la devise locale

_nzm.run( 'set', 'currencyCode', 'RON );

Marquage de la visualisation d’une page de produit

_nzm.run( 'require', 'ec');
_nzm.run( 'set', 'currencyCode', 'USD' );
_nzm.run( 'ec:addProduct', {
	'id': 'S-003',
	'name': 'Elkton Jacket',
	'category': 'Longsleeves/Men\'s Clothing/Other/Pants/T-shirts',
	'price': '249',
} );
_nzm.run( 'ec:setAction', 'detail' );
_nzm.run( 'send', 'pageview' );

Marquage de la visualisation des produits sur une page de catégorie

_nzm.run( 'require', 'ec' );
_nzm.run( 'set', 'currencyCode', 'EUR' );
_nzm.run( 'ec:addImpression', {
	'id': '266',
	'name': 'Spencer Cadet',
	'category': 'Climbing Equipment',
	'list': 'Product List',
	'position': '1'
} );
_nzm.run( 'ec:addImpression', {
	'id': '259',
	'name': 'E.C.O. Yoga Mat',
	'category': 'Climbing Equipment',
	'list': 'Product List',
	'position': '2'
} );
_nzm.run( 'send', 'pageview' );

Ajout d’un produit au panier

_nzm.run( 'require', 'ec');
_nzm.run( 'set', 'currencyCode', 'RON' );
_nzm.run( 'ec:addProduct', {
	'id': '035pp',
	'name': 'Pantalonis Trouser',
	'price': '44.11',
	'brand': 'Pantalonis',
	'category': 'Trousers',
	'quantity': 1
} );
_nzm.run( 'ec:setAction', 'add' );
_nzm.run( 'send', 'event', 'UX', 'click', 'add to cart' );

Suppression d’un produit du panier

_nzm.run( 'require', 'ec');
_nzm.run( 'set', 'currencyCode', 'RON' );
_nzm.run( 'ec:addProduct', {
	'id': '035pp',
	'quantity': '1',
} );
_nzm.run( 'ec:setAction', 'remove' );
_nzm.run( 'send', 'event', 'UX', 'click', 'remove from cart' );

Mesure des achats

_nzm.run( 'require', 'ec');
_nzm.run( 'set', 'currencyCode', 'RON' );
_nzm.run( 'ec:addProduct', {
	'id': 'T-03',
	'name': 'Spencer Cadet',
	'category': 'Climbing Equipment',
	'price': '84.00',
	'quantity': '1'
} );
_nzm.run( 'ec:setAction', 'purchase', {
	'id': '758',
	'affiliation': 'RetroMod',
	'revenue': '84.00',
	'tax': '0',
	'shipping': '4.00'
} );
_nzm.run('send', 'pageview');

Il vaut la peine de lire aussi les articles ci-dessous :

Etiquettes: api, remarketing, ecommerce, tracking, suivi