Dynamic remarketing based on web events

Events from the site
Initially, the advertiser's site was the basic source of events for dynamic remarketing in myTarget. Using a special JavaScript code Counter Top.Mail.Ru, integrated into the pages of the site, information about events is transmitted to myTarget. To analyze the behavior of users on the site, several basic entities and parameters are used that mark the pages of the site:
  • product - a visit to the product page, the product identifier and its cost are transmitted;
  • cart - a visit to the cart page or adding a product to the cart (pages with a list of products selected by the user), the product identifiers and their total cost are transferred;
  • purchase - a visit to the purchase confirmation page (when the purchase is made), product identifiers and their total cost are transmitted.
Features: The name of the entities (events / pages), information about product identifiers and their total cost is transmitted in the pagetype, productid and totalvalue parameters. The productid parameter must contain the same identifiers as shown in the store's product feed. The totalvalue parameter must always contain the sum of the cost of all products. In addition, the id of the feed to which the product belongs should be specified in the service parameter list.
Example of data transfer (JS-code call on the advertiser's site):
<script type="text/javascript">
var _tmr = _tmr || [];
_tmr.push({
type: 'itemView',
productid: '12345',
pagetype: 'product',
totalvalue: '3499.50',
list: '1'
});
</script>
For more information on dynamic remarketing based on events from sites and on creating product feeds (data source for generating advertisements), see the article.
Setting up a counter for dynamic remarketing
If you're going to use a counter for dynamic remarketing, write down the events you want to pass to myTarget in your code.

If the counter code is already set, add a special code for dynamic remarketing to it:
<!-- Rating@Mail.ru counter dynamic remarketing appendix -->
   <script type="text/javascript">
  	var _tmr = _tmr || [];
  	_tmr.push({
     	type: 'itemView',
     	productid: 'VALUE',
     	pagetype: 'VALUE',
     	list: 'VALUE',
     	totalvalue: 'VALUE'
   	});
   </script>
<!-- // Rating@Mail.ru counter dynamic remarketing appendix -->
Add required events to the code (primary data source):

  • product – product page visit;
  • cart – add products to the cart or visit the cart page;
  • purchase – visit the purchase confirmation page (the fact of purchase).

We recommend placing counter and dynamic remarketing codes after the opening tag <body>.

Be sure to place the counter code (framed by tag <!-- Rating@Mail.ru counter --> ) before dynrem code (framed by tag <!-- Rating@Mail.ru counter dynamic remarketing appendix -->).

Example of placing counter codes and dynamic remarketing:
<html>
   <body>
      <!-- Rating@Mail.ru counter -->
     	<script type="text/javascript">
        	var _tmr = window._tmr || (window._tmr = []);
        	_tmr.push({id: "Counter ID", type: "pageView", start: (new Date()).getTime(), pid: "USER_ID"});
        	(function (d, w, id) {
           	if (d.getElementById(id)) return;
           	var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
           	ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js";
           	var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};
           	if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }
        	})(document, window, "topmailru-code");
     	</script>
   	  <noscript><div>
        	<img src="//top-fwz1.mail.ru/counter?id=Counter ID;js=na" style="border:0;position:absolute;left:-9999px;" alt="" />
     	</div></noscript>
      <!-- //Rating@Mail.ru counter -->
      <!-- Rating@Mail.ru counter dynamic remarketing appendix -->
     	<script type="text/javascript">
        	var _tmr = _tmr || [];
        	_tmr.push({
           	type: 'itemView',
           	productid: 'VALUE',
           	pagetype: 'VALUE',
           	list: 'VALUE',
           	totalvalue: 'VALUE'
        	});
     	</script>
      <!-- // Rating@Mail.ru counter dynamic remarketing appendix -->
   </body>
</html>
In the counter code, instead of the "Counter ID", should be specified the counter identifier that you selected when loading the feed.

In the dynamic remarketing code, instead of "VALUE" for the parameters "productid", "pagetype", "list" and "totalvalue" certain values should be specified. They can be set automatically, for example, with the help of a certain tool that generates the code for the pages of your site.

Description of dynamic remarketing options

productid (required)
Used to specify the identifier of the product (products) concerned by the event. For example, the product identifier to which the site page displayed to the user is dedicated.

The parameter value must necessarily correspond to the product identifier from the feed (element "offer", property "id"). It is for this identifier that the system understands what products the user is interested in, so that based on them, select products from the feed to be displayed in advertisements.

Example: productid: '123456'

If there are several products on the page, for example, on the cart page (pagetype: 'cart') or the purchase confirmation page (pagetype: 'purchase'), then their identifiers should be listed in the array (in square brackets separated by commas).

Example: productid: ['123', '456']
pagetype
(required)
Used to specify the type of page or section of the site, or the event / action performed by the user on your site.

Values that must be sent (without these data, dynamic remarketing is impossible):

  • product – view product page or view information about a specific product;

  • cart – viewing the cart page, or adding a user to the cart without visiting its page;

  • purchase – view the purchase confirmation page (product purchase event / action).

Example:
pagetype: 'product'
totalvalue
Used to indicate the total cost of products. The parameter must contain the sum of the prices of all products specified in the parameter productid — for example, the sum of the prices of all products from the cart. If only one product is involved, then its current price. It makes sense to pass this parameter to the pagetype with the values product, cart and purchase.

Example: totalvalue: '499.99'
list
(required)
Used to specify the feed ID. You can use any identifier from the "feed id" column on the page with the list of feeds as a feed identifier.

Example: list: '1'

Examples of using dynamic remarketing code (for a site with one feed)

Product page (event / action: view information about a specific product).

Use the dynamic remarketing code with the indication pagetype: 'product', when displaying the product to the user he was interested in (specifically looked at information about a particular product).

If your site allows you to view information about different products without reloading the page, then you can dynamically update information about the product that the visitor is interested in - consistently make calls to the dynamic remarketing code with the corresponding values of the parameters productid and totalvalue.
<script type="text/javascript">
   var _tmr = _tmr || [];
   _tmr.push({
      type: 'itemView',
  	productid: '12345',
  	pagetype: 'product', 
  	totalvalue: '1000.89',
  	list: '1'
   });
</script>
Cart (event / action: view cart page, add item to cart).

Use the dynamic remarketing code with the indicatior pagetype: 'cart', if user navigates to the cart page and it is not empty, or the user has added some products to the cart without switching to it (without opening the cart page itself). Make calls to the dynamic remarketing code with the ID of all products currently in the cart.
<script type="text/javascript">
   var _tmr = _tmr || [];
  	_tmr.push({
      type: 'itemView',
  	productid: ['1234','5678','9012'],
  	pagetype: 'cart', 
  	totalvalue: '15000.45',
  	list: '1'
    });
</script>
Purchase page (event / action: fulfillment of purchase).

Use the dynamic remarketing code with the following pagetype: 'purchase', if user has completed the order. Make calls to the dynamic remarketing code with the ID of all products purchased by the user.
<script type="text/javascript">
   var _tmr = _tmr || [];
  	_tmr.push({
      type: 'itemView',
  	productid: ['1234','5678','9012'],
  	pagetype: 'purchase', 
  	totalvalue: '15000.45',
  	list: '1'
   });
</script>

Enable dynamic remarketing code through Google Tag Manager

Container creation

After creating an account in Google Tag Manager, you need to create a container. The container contains all the tags for a particular website. Therefore, you must give the container an appropriate name. For example, the container for myperfectsite.com can be called "myperfectsite.com".

To create a new container:
1. On the main page Google Tag Manager in the list of accounts, select the account you want and click on the "..." button. Then click on Create Container.
2. Enter the name of the container, select the "Website" option in the "Target Platform" section and click the "Create" button.
3. If the container is created together with the account, then on the main page click the "Create an account" button and on the next page add an account and create a container.

Container placement

After creating the container, a modal window containing the container JS code will appear. This code must be placed on each page of the site. How to place it correctly will be indicated in the modal window.

Adding Tags and Triggers

The steps to add a new GTM tag are:
1. On the main page, on the "Overview" tab, click on the "Add a new tag" button.
2. On the next page, enter the correct tag name and click anywhere in the area of the "Tag Configuration" page.
3. Then select the Custom HTML tag type.
4. In the next window, add the JS code of the TOP@mail.Ru counter and the JS code for dynamic remarketing.
5. In the advanced settings of the tag, in the "Activation settings" section of the tag, select "No restrictions".
Please note!
In the dynamic remarketing code, instead of "VALUE", the parameters "productid", "pagetype", "list" and "totalvalue" must be set to specific values. They can be set automatically, for example, using a tool that generates the code for the pages of your site.
In order for the previously created tag to work, you need to create a trigger, activation of which will trigger the dynamic remarketing JS code, which we added in the previous steps when adding a new tag.

To do this, you must sequentially perform the following steps:
1. Click anywhere in the "Triggers" area;
2. Add a new trigger by clicking on the plus sign:
3. Enter a meaningful name for the trigger and select the type of trigger "Window loaded".
Next, you need to determine when any or what events need to activate this trigger.

For example, we want this trigger to be activated when visiting the basket on the site.

To do this, you must:
  1. Click anywhere in the "Trigger Settings" area;
  2. In the group of checkboxes "Trigger activation conditions" select "Some events "Window loaded"";
  3. In the very first drop-down list on the left, select "Page URL", then "Contains" and, for example, /cart;
  4. Save changes by clicking on the "Save" button.
In this particular case, /cart as part of the URL is selected as an example only.

Publish changes

After you add the GTM tags and their corresponding triggers, you need to post your changes. To do this, on the "Workspace" tab of Google Tag Manager, click on the "Submit" button.
On the next page you need to enter the name of the published version and a brief description of the changes. Then click on the "Publish" button.

Features call code dynamic remarketing

Depending on the user's actions on the site, the dynamic remarketing code can be called an unlimited number of times without reloading the page, but all calls should be made only after calling the main counter code Top.Mail.Ru.

When calling the code in the global scope, to declare the _tmr object, it is enough to specify its name, for example:
<input type="button" id="addToCart" value="Add to cart">
<script type="text/javascript">
   jQuery('#addToCart').on('click', function() {
      var _tmr = _tmr || [];
  	_tmr.push({
     	type: 'itemView',
     	productid: '1234',
     	pagetype: 'cart',
     	list: '1'
  	});
  	return true;
   });
</script>
If the code is called inside some JS-function or elsewhere, then you may need to declare the _tmr object as a method of the global window object, for example:
<input type="button" onclick="var _tmr = window._tmr || (window._tmr = []); _tmr.push({ type:'itemView', productid:'1234', pagetype:'cart', list:'1' }); return true;" value="Add to cart">
The examples above demonstrate an embodiment of sending data to myTarget about adding a product to the cart when the user clicks the "Add to cart" button.
Was this article helpful?
Yes
No