Track your dnn website page views through facebook pixel code

The Facebook pixel can be used for three main functions:

1. Building Custom Audiences from your website for remarketing.
2. Optimizing ads for conversions.
3. Tracking conversions and attributing them back to your ads.

Benefits of using the pixel

With the Facebook pixel, you'll also be able to:

• See rich insights: In Ads Manager you'll see a dashboard which gives you information on the traffic across your website.
• Share your pixel: Useful when working with an agency or Facebook Marketing Partner. Instead of implementing a second pixel for your agency, you can share your existing pixel with them through Business Manager.

The pixel dashboard in Ads Manager.

The pixel code

The Facebook pixel code is made up of two main elements: the base code and the standard event code. The base code should be placed on every page of your website.

What the new code looks like on an add-to-cart page.

Standard events

The one part of the code you'll have to customize is the standard event section. There are 9 available standard events to choose from, such as "Add to cart" or "View Content". These represent the different types of actions people take on your website and only need to be placed on some pages.

Follow the below steps to implement it in dotnetnuke


Create Pixel code by navigating to this URL

https://en-gb.facebook.com/business/help/952192354843755

Copy the code and Place it in your dotnetnuke skin file .


<!-- Facebook Pixel Code -->

<script>

!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?

n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;

n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;

t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,

document,'script','https://connect.facebook.net/en_US/fbevents.js');




fbq('init', '1589443778035863');

fbq('track', "PageView");</script>

<noscript><img height="1" width="1" style="display:none"

src="https://www.facebook.com/tr?id=1589443778035863&ev=PageView&noscript=1"

/></noscript>

<!-- End Facebook Pixel Code -->

If your requirement is to track one page of your dnn website, follow the below steps to insert the pixel code inside head tag.

• Click on Edit Page at the top right corner   -- Click on PageSettings.
• Select Advanced Settings Tab and scroll down
• Paste the facebook pixel code in the PageHeaderTags textbox.

Now you can track the page views

Get State from Zip Code by calling zippopotam service through ajax call

Create Html Module and add Zip Code box in it.

Select the Html Module from the list of modules. Add to Content Pane

Click on Edit Content from the Edit action menu of module container 

Add Html for ZipCode box

 Open Portal's default.ascx file and write the below code inside script.

Using the below service to get the state from zipcode

api.zippopotam.us/country/postal-code

Refer http://www.zippopotam.us/ for country code.

Below example is for US country.


  $("#btnZipCode").click(function () {
                       
            var val = $("#txtZipCode").val();  //Calling the service and getting the state from zipcode
            var jqXHR = $.ajax({
                url: 'http://api.zippopotam.us/us/' + val,
                dataType: 'json',
                async: false
            });
            var json = JSON.parse(jqXHR.responseText);
            var result = json.places[0].state;
            alert(result);
                    

        });

Apply Page Template to an existing page in dotnetnuke

Step 1

Navigate to the page to which you want to apply the template.

Step 2

Select Import Page from the Pages Menu

Step 3

• Select the page template from the template dropdown.
• Chose "Replace the current page" option 
• Click on Import

----Done :):):)-----

Page template creation in dotnetnuke

Step 1. 

Navigate to the page which you want to use as a page template.

Step 2.

Click on the Export Page from the Edit Page menu at the top right corner of the page.

Enter Template name,description and check the Include Content check box.

Click on Export

Now your Page Template is ready :):):)

Page creation in dotnetnuke and adding module in it

Step 1 

Click on Add new Page from Pages Menu

Step 2

• Enter Page Title,Name and URL 
• If you have any page template to be applied to this page, select it from Page Template drop down list. It shows "Default" by default.
• Check Include Menu check box to include this page in the main navigation menu

Click on Add Page button

Now you are done with page creation in dotnetnuke website

Adding Module to the page

Click on Add New Module from the Modules Menu

We can add an html module to the page and edit the html content as shown below. Select Html from the list of modules.

Add to Content Pane

You can see an action menu at the top right corner of the module container. 

• Select Edit Content option from the edit(Pencil icon) action menu

A dialog will be opened in the rich text editing mode. You can add your html content in it.

Select Html tab and add html content in it

Click on save

Now you are done with adding the module to the page :):):)