How do I tag using an asynchronous script?

DWQA QuestionsCategory: Best PracticesHow do I tag using an asynchronous script?
asked 3 years ago
1 Answers
Sean Thummapudi Staff answered 2 years ago

Tagging Your Site with Asynchronous scripts

Utilizing the asynchronous (async) version of the tagging script, the tracking pixel, enables the parallel loading of images, scripts, and other resources on your site. Things will load faster and ansync loading minimizes the risk that any single script will slow or stop the loading of your site.

Existing customers who wish to use the non-async tagging described below must contact support to enable this on their account prior to updating their tagging as instructed below.

If you prefer to see traditional tagging instructions, click here.

Basic Tagging

Tags are automatically loaded by the Web browser as visitors view tag-enabled pages. These tags communicate information about visitors and the actions they take throughout their session. Additionally, our tags have a unique dual function. They enable us to deliver dynamic, customized content, run automatically optimizing A/B tests, recommendations, forms, toolbars and more.

Instructions:
Tags should be placed on each page you’d like to track. We recommend that the tags be placed on every page of the site.

Step One: Basic Tags

Copy the code below and taking care to customize the your SITE_NAME for your specific account. If you have questions, please contact the Support Team.

Your SITE_NAME is a version of your domain that is lower-cased and without spaces. For example, if your website is called: http://www.helloworld.com, then your SITE_NAME is “helloworld”. Text in GREEN should be replaced with the appropriate values.

<script src="https://use.rekko.com/SITE_NAME/tags.js" async></script>

Step Two: Product Page Tagging

Tagging product pages allows us to collect information for dynamic Recommendations. Please note that if your website has multiple templates, or a different page for each product, you must add this script to every page/template individually. Text in GREEN should be replaced with the appropriate values.

<script type="text/javascript">
window.convert_productCode="SKU";
window.convert_productCategory="CATEGORY1, CATEGORY2, CATEGORY3";
</script>

Step Three: Shopping Cart/Checkout Tagging

Shopping Cart tags enable us to collect transaction and e-commerce data for reporting, recommendation, and profiling engines. Unlike Web analytics applications that may only tag the final Order Confirmation page, we capture data from each stage of transactional process. All data gathered from any stage of the transaction is stored in the individual visitor’s record which can be used to define campaigns. Be sure to tag each page in the checkout process, including Order Confirmation, with the following tags. Text in GREEN should be replaced with the appropriate values.

<script type="text/javascript">
if (!window.convert_cart) {
window.convert_cart = {};
convert_cart.shoppingCartItems = new Array();
}
/*loop start*/
var convert_item = {};
convert_item.sku = "SKU";
convert_item.category = "CATEGORY";
convert_item.quantity = "QUANTITY";
convert_item.price = "PRICE";
convert_cart.shoppingCartItems.push(convert_item);
/*loop end*/
convert_cart.totalCost = "TOTAL_COST";
convert_cart.taxes = "TAXES";
convert_cart.discount = "DISCOUNT";
convert_cart.shipping = "SHIPPING";
convert_cart.promoCode = "PROMO_CODE";
</script>

Step Four: Order Confirmation Page Tagging

In addition to the shopping cart and checkout page tagging, the Order Confirmation page should include the last script block in order to collect Order ID and “purchased is true.” The latter informs Rekko that a transaction has been completed. Text in GREEN should be replaced with the appropriate values.

<script type="text/javascript">
if (!window.convert_cart) {
convert_cart = {};
}
convert_cart.orderId="ORDER_ID";
convert_cart.isPurchased=true;
</script>

Step Five: Visitor Information Tagging

Visitor Profiling data is always great to have to know who’s coming to your site. The tags below should be placed on pages where you’d like to collect this additional information. The checkout process and login pages are just a couple examples of where these tags should be placed. Text in GREEN should be replaced with the appropriate values.

<script type="text/javascript">
if(!window.convert_profile){
window.convert_profile={};
}
convert_profile.firstName="FIRSTNAME";
convert_profile.lastName="LASTNAME";
convert_profile.email="EMAIL";
convert_profile.login="LOGIN";
</script>

Optional: Additional Values and Custom Tags

While it is not necessary to tag for all values, it can be helpful – the more data you collect, the better your campaigns can be targeted and personalized. Use additonal tags if you want to pass additional data about your visitors to their visitor profile. Doing so will allow you to utilize Custom Profiles, helpful to further target and personalize your campaigns. Text in GREEN should be replaced with the appropriate values.

It’s not necessary to predefine a custom profile’s field name prior to passing it via tagging. If you’d like to use a new custom field, simply define it in your page tagging and if a corresponding field name exists in the customer’s database record, it’ll update that value. If not, a new field will be created in the customer’s record with the value you passed.

<script type="text/javascript">
if(!window.convert_profile){
window.convert_profile={};
}
convert_profile.zipcode="ZIPCODE";
convert_profile.customertype="CUSTOMERTYPE";
convert_profile.customVariableName1="CUSTOM1";
convert_profile.customVariableName2="CUSTOM2";
/*This type of line can be repeated for any number of custom variables*/
</script>

Support for Ajax Shopping Carts

More ecommerce and shopping cart platforms allow visitors to add products to cart without having to refresh the page and go to a separate shopping cart page. It can make for a quicker and more dynamic shopping experience.

Why is this so useful? Knowing what a visitor adds to their cart and for how much gives you the opportunity to further personalize a visitor’s experience while they’re shopping. You’ll be able to up-sell or cross-sell with other products, display promotions geared towards what and/or how much was added, or even recommend products based on what they showed interest in.

Carts that support this functionality are using Ajax to add to cart without having to refresh the page or go to the cart page each time. We’ve laid out the steps below to help you get your site tagged for whenever a visitor clicks that add to cart button.

How to pass cart info to Rekko with your Ajax “Add to Cart” Button

Upon clicking “Add to Cart“, update Rekko cart information by calling the following function without a page reload. At this point, campaigns scheduled to deliver after page load and upon adding to cart will be triggered.

<script type="text/javascript">
if(window.convert && window.convert.updateCart) {
convert.updateCart(@[email protected],@[email protected]);
}
</script>

Where @[email protected] refers to the total cost of the shopping cart after the product is added and @[email protected] refers to the product with SKU, Category, Price, and Quantity.Both of these values are optional, of course. You could just pass Rekko the cart total, just the cart items info, or both. It’s up to you, but more is always better!

When passing the cart item information, SKU is mandatory.

Example of just cart total being updated: Where cart total is being updated to 500 in Rekko after someone clicks “Add to Cart.”

<script type="text/javascript">
if (window.convert && window.convert.updateCart) {
convert.updateCart(500);
}
</script>

Example of both cart total and cart item info being updated.
<script type="text/javascript">
if (window.convert && window.convert.updateCart) {
convert.updateCart(500, {sku:"msj012c", category:"Men,New Arrivals,Blazers",quantity:1,price:125});
}
</script>

Please contact support with any additional questions.