Google Tag Manager

Google Tag Manager

In order for Divvit to work properly with GTM, Divvit needs to be able to gather the necessary information from GTM. GTM in turn, gathers this information from the data layer on your website. Therefore make sure you have your data layer and variables setup correctly. This will ensure Divvit receives all the information it needs and you get all the benefits Divvit provides.

You can find more detailed information about DataLayer and Variables under Google Tag Manager section here

For tracking all page views and orders we need to install two custom pixels into GTM. The first one will be fired on all pages and tracks pageviews for Divvit. The second one will be fired only on the "thankyou" page after an order has been placed successfully and track orders for Divvit.

General Tracking Pixel

1

Log in to your GTM account, click on "Tags" in the left sidebar navigation and click the "New" button on top of the page. You should reach a screen like this:

General Tracking Pixel
2

Name the tag as Divvit General.

3

Click on "Custom HTML Tag" and copy/paste the following code into the text field, replacing the YOUR_FRONTEND_ID with your Frontend ID from Divvit.

<script type="text/javascript"> !function(){var t=window.divvit=window.divvit||[];if(t.DV_VERSION="1.0.0",t.init=function(e){if(!t.bInitialized){var i=document.createElement("script");i.setAttribute("type","text/javascript"),i.setAttribute("async",!0),i.setAttribute("src","https://tag.divvit.com/tag.js?id="+e);var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(i,n)}},!t.bInitialized){t.functions=["customer","pageview","cartAdd","cartRemove","cartUpdated","orderPlaced","nlSubscribed","dv"];for(var e=0;e<t.functions.length;e++){var i=t.functions[e];t[i]=function(e){return function(){return Array.prototype.unshift.call(arguments,e),t.push(arguments),t}}(i)}}}(); divvit.init("YOUR_FRONTEND_ID"); divvit.pageview(); </script>
Copy to clipboard
4
Under the section "Triggering" make sure to select "All pages", so that the tracking code is invoked on all pages.
5
Click "Save" button.

Order Tracking Pixel

1

For Order Tracking Pixel you will use trigger called "Complete page". It is not built in GTM by default. Thus, you have to create it manually, as shown below:

  • Log on to your Google Tag Manager account and click on Triggers on the left side menu
  • Click new, and name your trigger "Complete page"
  • Click on the icon in the middle and choose Page View as Trigger type.
  • Now you have two checkboxes, one saying All Page Views and the other one Some Page Views, choose Some Page Views.
  • Chose type as Page URL, leave contains as it is
  • In the blank field, you have to enter a part of page URL without product information, for example /purchase/complete, hit save in the top left corner!
  • To check you complete page url you have to make a test purchase on you site and copy exact URL you see on “Thank you” page after order is complete.
  • Click "Save" button
2

Go back to "Tags" by clicking in the left sidebar and select "New" to create another pixel. Choose the same settings as above ("Custom HTML Tag") and place the following code into the text field:

<script type="text/javascript"> var orderData = { order: { orderId: {{transactionId}}, total: {{transactionTotal}}, shipping: {{transactionShipping}}, // optional, if available currency: {{transactionCurrency}}, // optional, if available paymentMethod: {{transactionPaymentMethod}}, // optional, if available voucher: {{transactionDiscount}}, // optional, if available voucherDiscount: {{transactionDiscountCode}}, products: [], // optional, if available customer: { idFields: { customerId: {{transactionCustomerId}} } } } }; var orderItems = {{transactionProducts}} || []; for (var i = 0; i < orderItems.length; i++) { var orderItem = orderItems[i]; orderData.order.products.push({ id: orderItem.sku, name: orderItem.name, category: orderItem.category, price: orderItem.price, quantity: orderItem.quantity }); } divvit.orderPlaced(orderData); </script>
Copy to clipboard
3

Delete all lines which include a variable name that you have not set up in GTM, as described below:

  • If you don’t have transactionShipping remove the whole line that says:

    shipping: {{transactionShipping}},
    Copy to clipboard
  • If you don’t have transactionCurrency remove the whole line that says:

    currency: {{transactionCurrency}},
    Copy to clipboard
  • If you don’t have transactionPaymentMethod remove the whole line that says:

    paymentMethod: {{transactionPaymentMethod}},
    Copy to clipboard
  • If you don’t have transactionDiscount remove the whole line that says:

    voucher: {{transactionDiscount}},
    Copy to clipboard
  • If you don’t have transactionDiscountCode remove the whole line that says:

    voucherDiscount: {{transactionDiscountCode}},
    Copy to clipboard
  • transactionProducts
  • If you don’t have transactionCustomerID remove the whole line that says:

    idFields: { customerId: {{transactionCustomerId}} }
    Copy to clipboard
  • If you don’t have transactionProducts remove the whole line that says:

    products: [],
    Copy to clipboard
4
To make sure that this pixel is fired after the general tracking pixel, in the section of Advanced settings underneath the text field please press Tag Sequencing Button and activate the checkbox "Fire a tag before Divvit Order Tracking fires". Select the first general Divvit tracking pixel from the select list.
5
Under the section ”Triggering" select "Complete page".
6

Click "Save" button.

Before you publish the Divvit scripts in Google Tag Manager, it might be a good idea to preview it and make sure it's working. To do that, click the top right button that says "Preview". If you get an error message go back to GTM section where error occurs and make sure everything is fixed.