如何在 DNN 代码隐藏中加载 Facebook Pixel NoScript 代码?

Posted

技术标签:

【中文标题】如何在 DNN 代码隐藏中加载 Facebook Pixel NoScript 代码?【英文标题】:How to load Facebook Pixel NoScript code in DNN codebehind? 【发布时间】:2018-09-14 05:22:32 【问题描述】:

我们有一个带有自定义代码的结帐模块,当用户是经销商时,它将为最终用户显示一个向导和另一个多视图。我试图仅在用户是最终用户时触发 Facebook 像素代码。我遇到的问题是我无法在 javascript 函数中调用的 NoScript 代码。我也不想将其放在 ASCX 文件中的脚本标记之后,因为仅在生成发票时才会调用其余的像素代码,并且 Facebook Pixel Helper Browser Extension 因此会出错。我试图拆分 Script 和 NoScript 代码。在下面的代码隐藏中,我从我设置的模块设置中设置 Facebook 像素 ID。我还为 NoScript 代码创建了一个设置,即 FacebookPixelForEndUserNoScriptImageCode 设置。

if (Settings["FacebookPixelIDForEndUser"] != null && !string.IsNullOrWhiteSpace(Settings["FacebookPixelIDForEndUser"].ToString()))
      EndUserFirstName = SessionManager.CurrentUserInfo.FirstName;
      EndUserLastName = SessionManager.CurrentUserInfo.LastName;
      EndUserEmail = SessionManager.CurrentUserInfo.PersonalEmailAddress;

      facebookInitializationCodeID = Settings["FacebookPixelIDForEndUser"].ToString();
      ScriptManager.RegisterStartupScript(Page, this.GetType(), "attacheEvents", "javascript:initializeFacebookPixelCodeForEndUser();", true);

      string FacebookPixelNoScriptCode = Settings["FacebookPixelForEndUserNoScriptImageCode"].ToString();
      Page.ClientScript.RegisterStartupScript(this.GetType(), "FacebookPixelForEndUserNoScriptImageCode", FacebookPixelNoScriptCode, false);

下面的代码是从代码隐藏中调用的前端代码。

    function initializeFacebookPixelCodeForEndUser()
    var custemail = '<%=EndUserEmail%>';
    var custfirstname = '<%=EndUserFirstName%>';
    var custlastname = '<%=EndUserLastName%>';

    !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', '<%=facebookInitializationCodeID%>', 
        em: custemail,
        fn: custfirstname,
        ln: custlastname,
    );
    fbq('track', 'PageView');

这是我在设置中设置的 NoScript 代码,并在调用 RegisterStartupScript 代码后立即调用。

<noscript><img   style="display:none"
src="https://www.facebook.com/tr? 
id=RemovedTheIDForPrivacy&ev=PageView&noscript=1"
/></noscript>

我当前的代码似乎失败了,因为它说 fbq 未定义。我在调用上述代码后立即调用购买事件,但我认为它失败了,因为代码不在一起。

<script>
 fbq('track', 'Purchase', 
   value: 1,
   currency: 'ZAR',
 );
</script>

有没有关于如何在 Javascript/JQuery 中调用 Script 和 NoScript 代码的解决方案?

【问题讨论】:

何时/何时确定用户是此类最终用户还是经销商?除非这必须发生在同一页面上的客户端,否则您的服务器端逻辑应处理此问题,并输出用于跟踪的 JS 代码,或者不输出 ... 上面的代码实际上是在一个 IF 语句中确定它是否是一个最终用户,因此它是在服务器端处理的。 (我没有在这个问题中包括它)。问题是我想从代码隐藏中调用像素跟踪代码并设置变量。是否可以通过编程方式构建和执行像素跟踪代码? 我不明白你在问什么。根据条件输出或不输出工作代码的实际问题在哪里? 我的问题是我试图在从服务器端调用它之后在客户端设置高级匹配变量,但我不能在JavaScript 函数。我试图拆分 你指的是客户端JS变量custemailcustfirstnamecustlastname吗?我看不出这有什么理由让你一开始就“拆开”代码。 【参考方案1】:

通常,当您遇到有关 fbq 未初始化的错误时,这是​​由于您在调用实际 Facebook 脚本之前渲染触发的代码,因此尚未定义。

我会确保对 Facebook JS 的引用位于您的代码之前(例如,在皮肤或页眉的顶部,而不是页脚。)

至于no script,如果你想从后面的代码中加载它,如果你使用WebForms模式,你可以使用&lt;asp:literal&gt;控件将其呈现到页面上。

【讨论】:

【参考方案2】:

我通过在服务器端使用 StringWriter 编写 Facebook Pixel Tracking 代码设法解决了这个问题。

if (!SessionManager.CurrentUserInfo.IsCustomerDealer)
                     

                    if (Settings["FacebookPixelIDForEndUser"] != null && !string.IsNullOrWhiteSpace(Settings["FacebookPixelIDForEndUser"].ToString()))
                    
                        EndUserFirstName = SessionManager.CurrentUserInfo.FirstName;
                        EndUserLastName = SessionManager.CurrentUserInfo.LastName;
                        EndUserEmail = SessionManager.CurrentUserInfo.UserName;

                        facebookInitializationCodeID = Settings["FacebookPixelIDForEndUser"].ToString();

                        string FacebookPixelResult = string.Empty;

                        using (var FBPxl = new StringWriter())
                        using (var FBCodescript = new htmlTextWriter(FBPxl))
                        
                            FBCodescript.AddAttribute(Attr.Type, "text/javascript");
                            FBCodescript.RenderBeginTag(Tag.Script);
                            //load ecommerce plugin
                            FBCodescript.WriteLine("!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);");
                            FBCodescript.WriteLine("if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0';");
                            FBCodescript.WriteLine("n.queue =[]; t = b.createElement(e); t.async = !0;");
                            FBCodescript.WriteLine("t.src = v; s = b.getElementsByTagName(e)[0];");
                            FBCodescript.WriteLine("s.parentNode.insertBefore(t, s)");
                            FBCodescript.WriteLine("(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');");
                            FBCodescript.WriteLine($"fbq('init', 'facebookInitializationCodeID',  em: 'EndUserEmail', fn: 'EndUserFirstName', ln: 'EndUserLastName',);");
                            FBCodescript.WriteLine("fbq('track', 'PageView');");
                            FBCodescript.RenderEndTag();
                            FBCodescript.WriteLine($"<noscript><img height='1' width='1' style='display:none'  src='https://www.facebook.com/tr?id=facebookInitializationCodeID&ev=PageView&noscript=1'/></noscript>");
                            FacebookPixelResult = FBCodescript.InnerWriter.ToString();
                        

                        Page.ClientScript.RegisterStartupScript(this.GetType(), "myFacebookPixelInitialization", FacebookPixelResult ,false);

                    
                

【讨论】:

以上是关于如何在 DNN 代码隐藏中加载 Facebook Pixel NoScript 代码?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 chrome 扩展中加载 Google Analytics 和 Facebook SDK?

在 Android Studio 中加载 Facebook 登录按钮时出现异常

Facebook 在 uitableview 中加载相册,但未在下一个收藏视图中打开

如何在 WKWebView 中加载的页面中的隐藏字段中获取值绑定

在ios中加载html时如何在wkwebview中隐藏带有src的图像?

Facebook iOS SDK 3.5 模式提要对话框在 iPhone 中加载为空